# EuiButtonComponent

**Type:** component

<p>A versatile button component that supports various states, sizes, and visual styles.
It can be used as a native <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> element while preserving consistent EUI behavior and styling.</p>
<h4>Basic buttons with variants</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;button euiButton&gt;Default&lt;/button&gt;
&lt;button euiButton euiPrimary&gt;Primary&lt;/button&gt;
&lt;button euiButton euiSecondary&gt;Secondary&lt;/button&gt;
&lt;button euiButton euiSuccess&gt;Success&lt;/button&gt;</code></pre></div><h4>Icon button</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;button euiButton euiIconButton aria-label=&quot;Notifications&quot;&gt;
  &lt;eui-icon-svg icon=&quot;bell:outline&quot;&gt;&lt;/eui-icon-svg&gt;
&lt;/button&gt;</code></pre></div><h4>CTA and block buttons</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;button euiButton euiCTAButton&gt;Call to Action&lt;/button&gt;
&lt;button euiButton euiBlockButton&gt;Full Width&lt;/button&gt;</code></pre></div><h4>Size variants</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;button euiButton euiSizeS&gt;Small&lt;/button&gt;
&lt;button euiButton euiSizeM&gt;Medium&lt;/button&gt;
&lt;button euiButton euiSizeL&gt;Large&lt;/button&gt;</code></pre></div><h4>Disabled and checked states</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;button euiButton [euiDisabled]=&quot;true&quot;&gt;Disabled&lt;/button&gt;
&lt;button euiButton [isChecked]=&quot;true&quot;&gt;Checked&lt;/button&gt;</code></pre></div><h4>As link</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;a euiButton href=&quot;/page&quot;&gt;Link Button&lt;/a&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-ts">onButtonClick(button: EuiButtonComponent): void {
  console.log(&#39;Button clicked:&#39;, button);
}</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Native button/anchor semantics preserved for screen readers</li>
<li>Keyboard accessible with Enter/Space (button) or Enter (link)</li>
<li>euiIconButton requires aria-label for icon-only buttons</li>
<li>Disabled state prevents interaction and is announced to screen readers</li>
<li>Focus ring visible by default (remove with hasNoFocusRing if alternative focus indicator exists)</li>
<li>isChecked state is visually indicated and announced</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use on <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> elements via euiButton attribute</li>
<li>Color variants: euiPrimary, euiBranding, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger, euiInverse</li>
<li>Size variants: euiSizeXS, euiSizeS, euiSizeM (default), euiSizeL</li>
<li>euiBasicButton removes background for minimal styling</li>
<li>euiCTAButton applies prominent call-to-action styling</li>
<li>euiBlockButton makes button full-width</li>
<li>euiIconButton optimizes layout for icon-only content</li>
<li>euiAvatarButton styles for avatar dropdown triggers</li>
<li>euiLineWrap allows multi-line button text</li>
<li>isCompact reduces padding and dimensions</li>
<li>euiOutline applies outline/ghost styling</li>
<li>euiRounded applies rounded corners</li>
<li>euiResponsive adjusts sizing based on viewport</li>
<li>euiStart/euiEnd aligns content within button</li>
<li>buttonClick event emits component instance on click</li>
</ul>


**Selector:** `button[euiButton], a[euiButton]`

**Standalone:** false

## Inputs

- **e2eAttr**: `string` - 
- **euiAvatarButton**: `boolean` - 
- **euiBasicButton**: `boolean` - 
- **euiBlockButton**: `boolean` - 
- **euiCTAButton**: `boolean` - 
- **euiDisabled**: `boolean` - 
- **euiIconButton**: `boolean` - 
- **euiLineWrap**: `boolean` - 
- **hasNoFocusRing**: `boolean` - 
- **id**: `string` - 
- **isChecked**: `boolean` - 
- **isCompact**: `boolean` - 

## Outputs

- **buttonClick**: `EventEmitter<EuiButtonComponent>` - <p>Event emitted when the button is clicked
Emits the button component instance</p>

