### File

`packages/components/eui-icon-button/eui-icon-button.component.ts`

### Description

A clickable button component that displays only an icon without text. Provides visual feedback states and supports various sizing and styling options. Commonly used in toolbars, navigation bars, and compact UI layouts where space is limited.

### Basic icon button

Example :

    <eui-icon-button
      icon="edit"
      ariaLabel="Edit item"
      (buttonClick)="onEdit()">
    </eui-icon-button>

### With state variant

Example :

    <eui-icon-button
      icon="delete"
      euiDanger
      size="l"
      ariaLabel="Delete item">
    </eui-icon-button>

### Accessibility

- Always provide descriptive `ariaLabel` for screen readers
- Button is keyboard accessible via Tab and Enter/Space
- Focus states are clearly visible

### Notes

- Use `hasNoPadding` for compact layouts or icon-only toolbars
- Apply `euiRounded` for circular button shape
- Set `euiDisabled` to prevent interaction
- Choose between `hasFocusHoverColor` and `hasFocusHoverBg` for hover effects

### Implements

`OnInit`

### Metadata

HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiVariant euiSizeS
selector | `eui-icon-button`
imports | `EUI_ICON`
styleUrls | `./eui-icon-button.component.scss`
templateUrl | `./eui-icon-button.component.html`

### Index

###### Methods
onClick
###### Inputs
ariaLabel euiDisabled euiRounded fillColor hasFocusHoverBg hasFocusHoverColor hasNoPadding hasOverflowHover icon iconUrl size tabindex
###### Outputs
buttonClick
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

ariaLabel
Type : `string`
Default value : `'eUI Icon button'`
Accessible label for screen readers describing the button's purpose.

euiDisabled
Type : `boolean`
Default value : `false`
Disables the button, preventing interaction and applying disabled styling. Default: false

euiRounded
Type : `boolean`
Default value : `false`
Applies rounded corners to the button shape instead of default square corners. Default: false

fillColor
Type : `string`
CSS color value to apply as the icon fill color. Overrides default theme colors.

hasFocusHoverBg
Type : `boolean`
Default value : `true`
Applies background color change on focus and hover states. Automatically disabled when hasFocusHoverColor is true. Default: true

hasFocusHoverColor
Type : `boolean`
Default value : `false`
Applies color change on focus and hover states instead of background change. Mutually exclusive with hasFocusHoverBg. Default: false

hasNoPadding
Type : `boolean`
Default value : `false`
Removes internal padding from the button, allowing the icon to fill the entire button area. Default: false

hasOverflowHover
Type : `boolean`
Default value : `false`
Enables hover state that expands beyond the button boundaries, typically used in dense layouts. Default: false

icon
Type : `string`
The name of the icon to display from the eUI icon library.

iconUrl
Type : `string`
URL path to a custom icon image. Used when displaying icons not available in the eUI icon library.

size
Type : `"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"`
Default value : `'m'`
Controls the icon dimensions. Default: 'm'

tabindex
Type : `number`
Default value : `0`
Tab order position for keyboard navigation. Set to -1 to remove from tab sequence. Default: 0

### Outputs

buttonClick
Type : `EventEmitter`
Emitted when the button is clicked. Payload contains the native click Event object.

### HostBindings

class
Type : `string`

### Methods

onClick
`onClick(event: Event)`
Parameters :
Name | Type | Optional
event | `Event` | No
Returns : `void`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""