# EuiChipComponent

**Type:** component

<p>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.</p>
<h4>Basic chip</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-chip&gt;Chip label&lt;/eui-chip&gt;</code></pre></div><h4>Chip with color variant</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-chip euiPrimary&gt;Primary&lt;/eui-chip&gt;
&lt;eui-chip euiSuccess&gt;Success&lt;/eui-chip&gt;</code></pre></div><h4>Removable chip</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-chip [isChipRemovable]=&quot;true&quot; (remove)=&quot;onRemove($event)&quot;&gt;
  Removable
&lt;/eui-chip&gt;</code></pre></div><h4>Chip with icon</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-chip&gt;
  &lt;eui-icon-svg icon=&quot;user:outline&quot;&gt;&lt;/eui-icon-svg&gt;
  User
&lt;/eui-chip&gt;</code></pre></div><h4>Filled chip with tooltip</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-chip
  [isFilled]=&quot;true&quot;
  euiTooltip=&quot;Additional information&quot;
  tooltipMessage=&quot;Chip details&quot;&gt;
  Info
&lt;/eui-chip&gt;</code></pre></div><h4>Size variants</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-chip euiSizeS&gt;Small&lt;/eui-chip&gt;
&lt;eui-chip&gt;Default&lt;/eui-chip&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-ts">onRemove(data: any): void {
  console.log(&#39;Chip removed:&#39;, data);
}</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Uses role=&quot;status&quot; for screen reader announcements (changes to &quot;listitem&quot; within eui-chip-list)</li>
<li>aria-label provides context about chip content (default: &quot;Chip content&quot;)</li>
<li>Removable chips have keyboard accessible remove button (Enter/Space)</li>
<li>Backspace key can also remove chips when focused</li>
<li>Icon-only chips should have descriptive aria-label</li>
<li>Color variants provide visual meaning supplemented by text</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Can be used as element (eui-chip) or attribute (span[euiChip], li[euiChip])</li>
<li>Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger</li>
<li>Size variants: euiSizeS, default (medium)</li>
<li>isChipRemovable adds close button and enables removal</li>
<li>isFilled applies solid background color instead of outline</li>
<li>euiOutline applies outline/ghost styling</li>
<li>euiDisabled disables interaction</li>
<li>colorPalette accepts custom color palette names for extended theming</li>
<li>tooltipMessage displays tooltip on hover</li>
<li>id and euiInternalId for identification (euiInternalId used internally for tracking)</li>
<li>data property holds chip metadata including tooltip configuration</li>
<li>remove event emits chip data when removed</li>
<li>Supports icon content via eui-icon-svg child component</li>
<li>Automatically sets role=&quot;listitem&quot; when used within eui-chip-list</li>
<li>Commonly used in eui-chip-list for managing multiple chips</li>
</ul>


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

**Standalone:** false

## Inputs

- **ariaLabel**: `string` - <p>Sets the <code>aria-label</code> attribute for the host element.</p>

- **colorPalette**: `string` - <p>Extra color palette to be used on the chip.</p>

- **data**: `any` - <p>Sets the data of the chip like tooltip configuration.</p>

- **e2eAttr**: `string` - <p>Sets the <code>data-e2e</code> attribute for the host element.</p>

- **euiInternalId**: `string` - <p>Sets the euiInternalId of the chip.</p>

- **id**: `string | number` - <p>Sets the id of the chip.</p>

- **isChipRemovable**: `boolean` - <p>Wether the chip can be removed.</p>

- **isFilled**: `boolean` - <p>Wether the chip is filled with color.</p>

- **tooltipMessage**: `string` - <p>Sets the label of the tooltip to diaply on hover.</p>


## Outputs

- **remove**: `EventEmitter` - <p>Event emitted when the chip is removed.</p>

