# EuiButtonComponent

**Type:** component



A versatile button component that supports various states, sizes, and visual styles.
It can be used as a native `<button>` or `<a>` element while preserving consistent EUI behavior and styling.

#### Basic buttons with variants
```html
<button euiButton>Default</button>
<button euiButton euiPrimary>Primary</button>
<button euiButton euiSecondary>Secondary</button>
<button euiButton euiSuccess>Success</button>
```

#### Icon button
```html
<button euiButton euiIconButton aria-label="Notifications">
  <eui-icon-svg icon="bell:outline"></eui-icon-svg>
</button>
```

#### CTA and block buttons
```html
<button euiButton euiCTAButton>Call to Action</button>
<button euiButton euiBlockButton>Full Width</button>
```

#### Size variants
```html
<button euiButton euiSizeS>Small</button>
<button euiButton euiSizeM>Medium</button>
<button euiButton euiSizeL>Large</button>
```

#### Disabled and checked states
```html
<button euiButton [euiDisabled]="true">Disabled</button>
<button euiButton [isChecked]="true">Checked</button>
```

#### As link
```html
<a euiButton href="/page">Link Button</a>
```

```ts
onButtonClick(button: EuiButtonComponent): void {
  console.log('Button clicked:', button);
}
```

### Accessibility
- Native button/anchor semantics preserved for screen readers
- Keyboard accessible with Enter/Space (button) or Enter (link)
- euiIconButton requires aria-label for icon-only buttons
- Disabled state prevents interaction and is announced to screen readers
- Focus ring visible by default (remove with hasNoFocusRing if alternative focus indicator exists)
- isChecked state is visually indicated and announced

### Notes
- Use on `<button>` or `<a>` elements via euiButton attribute
- Color variants: euiPrimary, euiBranding, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger, euiInverse
- Size variants: euiSizeXS, euiSizeS, euiSizeM (default), euiSizeL
- euiBasicButton removes background for minimal styling
- euiCTAButton applies prominent call-to-action styling
- euiBlockButton makes button full-width
- euiIconButton optimizes layout for icon-only content
- euiAvatarButton styles for avatar dropdown triggers
- euiLineWrap allows multi-line button text
- isCompact reduces padding and dimensions
- euiOutline applies outline/ghost styling
- euiRounded applies rounded corners
- euiResponsive adjusts sizing based on viewport
- euiStart/euiEnd aligns content within button
- buttonClick event emits component instance on click


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

## Inputs
- **e2eAttr**: `string` - 
- **euiAvatarButton**: `boolean` - 
- **euiBasicButton**: `boolean` - 
- **euiBlockButton**: `boolean` - 
- **euiCTAButton**: `boolean` - 
- **euiDisabled**: `boolean` - Controls the disabled state of the button When true, adds the disabled attribute and prevents interaction
- **euiIconButton**: `boolean` - 
- **euiLineWrap**: `boolean` - 
- **hasNoFocusRing**: `boolean` - 
- **id**: `string` - 
- **isChecked**: `boolean` - Controls the checked state of the button When true, applies accent styling
- **isCompact**: `boolean` - 
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiBranding**: `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]]
- **euiInverse**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeM**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiOutline**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiRounded**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiResponsive**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiStart**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiEnd**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

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