# EuiChipButtonComponent

**Type:** component

<p>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.</p>
<h4>Basic chip button</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-chip-button (buttonClick)=&quot;onChipClick($event)&quot;&gt;
  Click me
&lt;/eui-chip-button&gt;</code></pre></div><h4>Chip buttons with variants</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-chip-button euiPrimary [isFilled]=&quot;true&quot;&gt;
  Primary
&lt;/eui-chip-button&gt;
&lt;eui-chip-button euiSuccess&gt;
  Success
&lt;/eui-chip-button&gt;</code></pre></div><h4>Filter chips</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-chip-button
  id=&quot;filter-active&quot;
  [isFilled]=&quot;isActive&quot;
  (buttonClick)=&quot;toggleFilter($event)&quot;&gt;
  Active
&lt;/eui-chip-button&gt;</code></pre></div><h4>With tooltip</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-chip-button
  euiTooltip=&quot;Click to apply filter&quot;
  tooltipMessage=&quot;Filter by category&quot;&gt;
  Category
&lt;/eui-chip-button&gt;</code></pre></div><h4>Size variants</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-chip-button euiSizeS&gt;Small&lt;/eui-chip-button&gt;
&lt;eui-chip-button&gt;Default&lt;/eui-chip-button&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-ts">onChipClick(id: string | number): void {
  console.log(&#39;Chip button clicked:&#39;, id);
}

toggleFilter(id: string | number): void {
  this.isActive = !this.isActive;
}</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Native button semantics for keyboard accessibility (Enter/Space)</li>
<li>Focus visible by default for keyboard navigation</li>
<li>Disabled state prevents interaction and is announced to screen readers</li>
<li>Color variants provide visual meaning supplemented by text labels</li>
<li>tooltipMessage provides additional context on hover</li>
<li>Ensure descriptive labels for screen reader users</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Can be used as element (eui-chip-button) or attribute (span[euiChipButton], li[euiChipButton])</li>
<li>Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger</li>
<li>Size variants: euiSizeS, default (medium)</li>
<li>isFilled applies solid background color instead of outline</li>
<li>euiOutline applies outline/ghost styling</li>
<li>euiDisabled disables button interaction</li>
<li>buttonClick event emits the chip&#39;s id when clicked</li>
<li>id property used for identification in click events</li>
<li>euiInternalId for internal tracking purposes</li>
<li>tooltipMessage displays tooltip on hover</li>
<li>Different from eui-chip: designed for actions, not display/removal</li>
<li>Commonly used for filters, category selection, and toggleable options</li>
<li>Does not support removal functionality (use eui-chip with isChipRemovable instead)</li>
</ul>


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

**Standalone:** false

## Inputs

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

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

- **buttonClick**: `EventEmitter` - 
