# EuiChipComponent

**Type:** component



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
```html
<eui-chip>Chip label</eui-chip>
```

#### Chip with color variant
```html
<eui-chip euiPrimary>Primary</eui-chip>
<eui-chip euiSuccess>Success</eui-chip>
```

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

#### Chip with icon
```html
<eui-chip>
  <eui-icon-svg icon="user:outline"></eui-icon-svg>
  User
</eui-chip>
```

#### Filled chip with tooltip
```html
<eui-chip
  [isFilled]="true"
  euiTooltip="Additional information"
  tooltipMessage="Chip details">
  Info
</eui-chip>
```

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

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


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

## Inputs
- **ariaLabel**: `string` - Sets the `aria-label` attribute for the host element.
- **colorPalette**: `string` - Extra color palette to be used on the chip.
- **data**: `any` - Sets the data of the chip like tooltip configuration.
- **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.
- **isChipRemovable**: `boolean` - Wether the chip can be removed.
- **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
- **remove**: `EventEmitter` - Event emitted when the chip is removed.