File

packages/components/eui-chip-button/eui-chip-button.component.ts

Description

Chip button component that provides clickable chip-styled buttons for triggering actions. Similar to eui-chip but designed specifically for button interactions rather than display or removal. Supports color variants, sizes, and filled/outline styles for various use cases. Emits buttonClick event when clicked, making it ideal for filters, toggles, and action triggers.

Basic chip button

<eui-chip-button (buttonClick)="onChipClick($event)">
  Click me
</eui-chip-button>

Chip buttons with variants

<eui-chip-button euiPrimary [isFilled]="true">
  Primary
</eui-chip-button>
<eui-chip-button euiSuccess>
  Success
</eui-chip-button>

Filter chips

<eui-chip-button
  id="filter-active"
  [isFilled]="isActive"
  (buttonClick)="toggleFilter($event)">
  Active
</eui-chip-button>

With tooltip

<eui-chip-button
  euiTooltip="Click to apply filter"
  tooltipMessage="Filter by category">
  Category
</eui-chip-button>

Size variants

<eui-chip-button euiSizeS>Small</eui-chip-button>
<eui-chip-button>Default</eui-chip-button>

onChipClick(id: string | number): void {
  console.log('Chip button clicked:', id);
}

toggleFilter(id: string | number): void {
  this.isActive = !this.isActive;
}

Accessibility

• Native button semantics for keyboard accessibility (Enter/Space)
• Focus visible by default for keyboard navigation
• Disabled state prevents interaction and is announced to screen readers
• Color variants provide visual meaning supplemented by text labels
• tooltipMessage provides additional context on hover
• Ensure descriptive labels for screen reader users

Notes

• Can be used as element (eui-chip-button) or attribute (span[euiChipButton], li[euiChipButton])
• Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger
• Size variants: euiSizeS, default (medium)
• isFilled applies solid background color instead of outline
• euiOutline applies outline/ghost styling
• euiDisabled disables button interaction
• buttonClick event emits the chip's id when clicked
• id property used for identification in click events
• euiInternalId for internal tracking purposes
• tooltipMessage displays tooltip on hover
• Different from eui-chip: designed for actions, not display/removal
• Commonly used for filters, category selection, and toggleable options
• Does not support removal functionality (use eui-chip with isChipRemovable instead)