# EuiChipButtonComponent

**Type:** component



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
```html
<eui-chip-button (buttonClick)="onChipClick($event)">
  Click me
</eui-chip-button>
```

#### Chip buttons with variants
```html
<eui-chip-button euiPrimary [isFilled]="true">
  Primary
</eui-chip-button>
<eui-chip-button euiSuccess>
  Success
</eui-chip-button>
```

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

#### With tooltip
```html
<eui-chip-button
  euiTooltip="Click to apply filter"
  tooltipMessage="Filter by category">
  Category
</eui-chip-button>
```

#### Size variants
```html
<eui-chip-button euiSizeS>Small</eui-chip-button>
<eui-chip-button>Default</eui-chip-button>
```

```ts
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)


**Selector:** `eui-chip-button, span[euiChipButton], li[euiChipButton]`

## Inputs
- **e2eAttr**: `string` - Sets the `data-e2e` attribute for the host element.
- **euiInternalId**: `string` - Sets the euiInternalId of the chip.
- **id**: `string | number` - Sets the id of the chip.
- **isFilled**: `boolean` - Wether the chip is filled with color.
- **tooltipMessage**: `string` - Sets the label of the tooltip to diaply on hover.
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiOutline**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDisabled**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **buttonClick**: `EventEmitter` -