### 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

Example :

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

#### Chip buttons with variants

Example :

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

#### Filter chips

Example :

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

#### With tooltip

Example :

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

#### Size variants

Example :

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

Example :

    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)

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiVariant euiSizeS euiSizeVariant euiOutline euiDisabled
selector | `eui-chip-button, span[euiChipButton], li[euiChipButton]`
imports | `EUI_ICON` `EUI_ICON_BUTTON`
templateUrl | `./eui-chip-button.component.html`
styleUrl | `./eui-chip-button.scss`

### Index

###### Properties

- baseStatesDirective

###### Methods

- onClick

###### Inputs

- e2eAttr
- euiInternalId
- id
- isFilled
- tooltipMessage

###### Outputs

- buttonClick

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-chip'`
Sets the `data-e2e` attribute for the host element.

euiInternalId
Type : `string`
Default value : `null`
Sets the euiInternalId of the chip.

id
Type : `string | number`
Sets the id of the chip.

isFilled
Type : `boolean`
Default value : `false`
Wether the chip is filled with color.

tooltipMessage
Type : `string`
Sets the label of the tooltip to diaply on hover.

### Outputs

buttonClick
Type : `EventEmitter`

### HostBindings

class
Type : `string`
Computes and returns the CSS classes for the component based on its current state.

### Methods

onClick
`onClick()`
Returns : `void`

### Properties

baseStatesDirective
Type : `unknown`
Default value : `inject(BaseStatesDirective)`

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

# results matching ""

# No results matching ""