### File

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

### Description

Chips are compact elements that allow users to enter information, select a choice, filter content or trigger an action. The eui-chip component can also be displayed dynamically as a group of multiple interactive elements, see eui-chip-list.

#### Basic chip

Example :

    <eui-chip>Chip label</eui-chip>

#### Chip with color variant

Example :

    <eui-chip euiPrimary>Primary</eui-chip>
    <eui-chip euiSuccess>Success</eui-chip>

#### Removable chip

Example :

    <eui-chip [isChipRemovable]="true" (remove)="onRemove($event)">
      Removable
    </eui-chip>

#### Chip with icon

Example :

    <eui-chip>
      <eui-icon-svg icon="user:outline"></eui-icon-svg>
      User
    </eui-chip>

#### Filled chip with tooltip

Example :

    <eui-chip
      [isFilled]="true"
      euiTooltip="Additional information"
      tooltipMessage="Chip details">
      Info
    </eui-chip>

#### Size variants

Example :

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

Example :

    onRemove(data: any): void {
      console.log('Chip removed:', data);
    }

### Accessibility

- Uses role="status" for screen reader announcements (changes to "listitem" within eui-chip-list)
- aria-label provides context about chip content (default: "Chip content")
- Removable chips have keyboard accessible remove button (Enter/Space)
- Backspace key can also remove chips when focused
- Icon-only chips should have descriptive aria-label
- Color variants provide visual meaning supplemented by text

### Notes

- Can be used as element (eui-chip) or attribute (span[euiChip], li[euiChip])
- Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger
- Size variants: euiSizeS, default (medium)
- isChipRemovable adds close button and enables removal
- isFilled applies solid background color instead of outline
- euiOutline applies outline/ghost styling
- euiDisabled disables interaction
- colorPalette accepts custom color palette names for extended theming
- tooltipMessage displays tooltip on hover
- id and euiInternalId for identification (euiInternalId used internally for tracking)
- data property holds chip metadata including tooltip configuration
- remove event emits chip data when removed
- Supports icon content via eui-icon-svg child component
- Automatically sets role="listitem" when used within eui-chip-list
- Commonly used in eui-chip-list for managing multiple chips

### Implements

`AfterContentInit`

### Metadata

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

### Index

###### Properties

- baseStatesDirective
- chipLabel
- euiIcons
- role

###### Methods

- Public onRemove

###### Inputs

- ariaLabel
- colorPalette
- data
- e2eAttr
- euiInternalId
- id
- isChipRemovable
- isFilled
- tooltipMessage

###### Outputs

- remove

###### HostBindings

- attr.role
- class

###### Accessors

- cssClasses

### Inputs

ariaLabel
Type : `string`
Default value : `'Chip content'`
Sets the `aria-label` attribute for the host element.

colorPalette
Type : `string`
Extra color palette to be used on the chip.

data
Type : `any`
Default value : `{ id: crypto.randomUUID(), tooltip: { color: 'euiTooltipPrimary', contentAlignment: null, position: 'above', }, }`
Sets the data of the chip like tooltip configuration.

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.

isChipRemovable
Type : `boolean`
Default value : `false`
Wether the chip can be removed.

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

remove
Type : `EventEmitter`
Event emitted when the chip is removed.

### HostBindings

attr.role
Type : `string`
Default value : `'status'`
Sets the `role` attribute for the host element.

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

### Methods

Public onRemove
`onRemove(event?: Event)`

Remove chip handler

Parameters :

Name | Type | Optional | Description
event | `Event` | Yes | Click event

Returns : `void`

### Properties

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

chipLabel
Type : `ElementRef<HTMLInputElement>`
Decorators : `@ViewChild('chipLabel')`

euiIcons
Type : `QueryList<EuiIconSvgComponent>`
Decorators : `@ContentChildren(undefined)`
Icon declares by user in the chip

role
Type : `string`
Default value : `'status'`
Decorators : `@HostBinding('attr.role')`
Sets the `role` attribute for the host element.

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