Directives

July 29, 2026 · View on GitHub

Part of the igniteui-angular-components skill hub. For app setup, providers, and import patterns — see setup.md.

Button & Icon Button
Button Group
Ripple Effect
Tooltip
Drag and Drop

Button & Icon Button

import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
import { IgxIconComponent } from 'igniteui-angular/icon';

<!-- Text buttons -->
<button igxButton="flat">Flat</button>
<button igxButton="contained">Contained</button>
<button igxButton="outlined">Outlined</button>
<button igxButton="fab">
  <igx-icon>add</igx-icon>
</button>

<!-- Icon-only buttons -->
<button igxIconButton="flat"><igx-icon>edit</igx-icon></button>
<button igxIconButton="outlined"><igx-icon>delete</igx-icon></button>
<button igxIconButton="contained"><igx-icon>save</igx-icon></button>

<!-- Disabled state -->
<button igxButton="contained" [disabled]="isLoading()">Submit</button>

Button variants for igxButton: 'flat', 'contained', 'outlined', 'fab'. Button variants for igxIconButton: 'flat', 'outlined', 'contained'.

Button Group

// Option A — convenience collection (includes IgxButtonGroupComponent + IgxButtonDirective)
import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group';

// Option B — individual imports
import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
import { IgxButtonDirective } from 'igniteui-angular/directives';

import { IgxIconComponent } from 'igniteui-angular/icon';

<igx-buttongroup selectionMode="multi" alignment="horizontal"
  (selected)="onSelected($event)" (deselected)="onDeselected($event)">
  <button igxButton [selected]="true"><igx-icon>format_bold</igx-icon></button>
  <button igxButton><igx-icon>format_italic</igx-icon></button>
  <button igxButton [disabled]="true"><igx-icon>format_underlined</igx-icon></button>
</igx-buttongroup>

selectionMode: 'single' (default) | 'singleRequired' (one always stays selected) | 'multi'
alignment: 'horizontal' (default) | 'vertical'; [disabled] on the group disables all buttons
(selected)/(deselected) emit IButtonGroupEventArgs ({ owner, button, index }, from igniteui-angular/button-group)
Programmatic: selectButton(index), deselectButton(index), selectedButtons on IgxButtonGroupComponent
Further members: search_api({ framework: "angular", query: "IgxButtonGroupComponent" })

Ripple Effect

import { IgxRippleDirective } from 'igniteui-angular/directives';

<!-- Add to any clickable element for Material-style ink ripple -->
<button igxButton="contained" igxRipple>Click me</button>
<div igxRipple igxRippleTarget=".my-class" class="custom-surface">Interactive div</div>

Inputs: [igxRipple] (ripple color), [igxRippleCentered] (always start from center), [igxRippleDisabled].

<button igxButton="contained" igxRipple="#ff4081" [igxRippleCentered]="true">Pink ripple</button>

Full doc in the MCP: get_doc({ framework: "angular", name: "tooltip" }) covers triggers, overlay behavior, sticky/arrowed tooltips, styling, and accessibility.

The at-a-glance pairing — igxTooltipTarget on the host references the igxTooltip element (both from igniteui-angular/directives):

<button igxButton [igxTooltipTarget]="myTooltip" [showDelay]="500">Hover or focus me</button>
<div igxTooltip #myTooltip="tooltip">Helpful tooltip text</div>

Drag and Drop

import { IgxDragDirective, IgxDropDirective, IDragMoveEventArgs, IDropDroppedEventArgs } from 'igniteui-angular/directives';

Basic drag and drop

<!-- Draggable source -->
<div [igxDrag]="item" (dragMove)="onDragMove($event)" (dragEnd)="onDragEnd($event)">
  <igx-icon>drag_indicator</igx-icon>
  {{ item.name }}
</div>

<!-- Drop target -->
<div igxDrop (dropped)="onDrop($event)" (enter)="onDragEnter($event)" (leave)="onDragLeave($event)">
  Drop here
</div>

onDrop(event: IDropDroppedEventArgs) {
  const draggedItem = event.drag.data;
  // Move draggedItem to this drop zone
  event.cancel = false; // allow the drop
}

Ghost element (custom drag preview)

<div igxDrag [ghostTemplate]="ghostTmpl">Drag me</div>

<ng-template #ghostTmpl>
  <div class="custom-ghost">
    <igx-icon>content_copy</igx-icon> Moving...
  </div>
</ng-template>

Reorderable list

<igx-list>
  @for (item of items; track item.id) {
    <igx-list-item [igxDrag]="item" igxDrop (dropped)="reorder($event, item)">
      <igx-icon igxListAction>drag_handle</igx-icon>
      <span igxListLine>{{ item.name }}</span>
    </igx-list-item>
  }
</igx-list>

Key drag events: (dragStart), (dragMove), (dragEnd), (dragClick), (ghostCreate), (ghostDestroy), (transitioned). Key drop events: (enter), (leave), (over), (dropped).