# `src/components/icon-button/IconButton.ts`:

## class: `IconButton`, `btu-icon-button`

### Superclass

| Name         | Module | Package |
| ------------ | ------ | ------- |
| `LitElement` |        | lit     |

### Mixins

| Name                | Module                         | Package |
| ------------------- | ------------------------------ | ------- |
| `TooltipMixin`      | /src/util/TooltipMixin.js      |         |
| `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
| `ReadyMixin`        | /src/util/ReadyMixin.js        |         |

### Fields

| Name               | Privacy | Type                                     | Default         | Description                                                                                                                                               | Inherited From |
| ------------------ | ------- | ---------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `name`             |         | `string \| undefined`                    |                 | Optional name for the button which can be used to identify the button in a callback.                                                                      |                |
| `type`             |         | `IconButtonType`                         | `'primary'`     | Specifies the type of icon-button, controlling the visual style.                                                                                          |                |
| `symbol`           |         | `string \| undefined`                    |                 | Lucide icon symbol.                                                                                                                                       |                |
| `size`             |         | `IconButtonSize`                         | `'md'`          | Specifies the size of icon-button.                                                                                                                        |                |
| `destructive`      |         | `boolean`                                | `false`         | Specifies an icon-button will be used to take any destructive action overriding the&#xA;default color used for the icon-button type with the error color. |                |
| `disabled`         |         | `boolean`                                | `false`         | Disables the button, preventing interaction and indicating an inactive state.                                                                             |                |
| `tooltip`          |         | `string`                                 | `''`            | Tooltip text content. Set to empty string to remove the tooltip.                                                                                          | TooltipMixin   |
| `tooltipPosition`  |         | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'`         | Position relative to the host element. Auto-flips when constrained by the viewport.                                                                       | TooltipMixin   |
| `tooltipDelay`     |         | `number`                                 | `300`           | Show delay in milliseconds (hover trigger only).                                                                                                          | TooltipMixin   |
| `tooltipOffset`    |         | `TooltipOffset \| null`                  | `null`          | Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).                                                                                          | TooltipMixin   |
| `tooltipNoArrow`   |         | `boolean`                                | `false`         | Hide the arrow pseudo-element.                                                                                                                            | TooltipMixin   |
| `tooltipTrigger`   |         | `string`                                 | `'hover focus'` | Space-separated trigger types: 'hover', 'focus', 'click'.                                                                                                 | TooltipMixin   |
| `_onMouseLeave`    | private |                                          |                 |                                                                                                                                                           | TooltipMixin   |
| `_onFocusIn`       | private |                                          |                 |                                                                                                                                                           | TooltipMixin   |
| `_onFocusOut`      | private |                                          |                 |                                                                                                                                                           | TooltipMixin   |
| `_onClick`         | private |                                          |                 |                                                                                                                                                           | TooltipMixin   |
| `_onNativeToggle`  | private |                                          |                 |                                                                                                                                                           | TooltipMixin   |
| `_onKeyDown`       | private |                                          |                 |                                                                                                                                                           | TooltipMixin   |
| `_onDocumentClick` | private | `((e: MouseEvent) => void) \| null`      | `null`          |                                                                                                                                                           | TooltipMixin   |

### Methods

| Name                  | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return    | Inherited From    |
| --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
| `_relayTooltipAttrs`  | private |                                                                                                                                                                                                                                                                                    |                                                         | `void`    |                   |
| `_handleClick`        | private |                                                                                                                                                                                                                                                                                    |                                                         | `void`    |                   |
| `_buildButtonClasses` | private |                                                                                                                                                                                                                                                                                    |                                                         | `string`  |                   |
| `emit`                |         | Dispatches a type-safe CustomEvent with standardized configuration.&#xA;&#xA;All events are configured with:&#xA;- bubbles: true (event propagates up the DOM tree)&#xA;- cancelable: false (event cannot be cancelled)&#xA;- composed: true (event crosses shadow DOM boundaries) | `type: K, detail: UnpackCustomEvent<CustomEventMap[K]>` | `boolean` | EventEmitterMixin |

### Events

| Name                    | Type                                       | Description                                 | Inherited From |
| ----------------------- | ------------------------------------------ | ------------------------------------------- | -------------- |
| `btu-icon-button-ready` | `CustomEvent`                              | Fired after first render and initialization |                |
| `btu-icon-button-click` | `CustomEvent<{name: string \| undefined}>` | Fired when the button is clicked            |                |

### Attributes

| Name               | Field           | Inherited From |
| ------------------ | --------------- | -------------- |
| `name`             | name            |                |
| `type`             | type            |                |
| `symbol`           | symbol          |                |
| `size`             | size            |                |
| `destructive`      | destructive     |                |
| `disabled`         | disabled        |                |
| `tooltip`          | tooltip         | TooltipMixin   |
| `tooltipPosition`  | tooltipPosition | TooltipMixin   |
| `tooltipDelay`     | tooltipDelay    | TooltipMixin   |
| `tooltipOffset`    | tooltipOffset   | TooltipMixin   |
| `tooltipNoArrow`   | tooltipNoArrow  | TooltipMixin   |
| `tooltipTrigger`   | tooltipTrigger  | TooltipMixin   |
| `tooltip-position` | tooltipPosition | TooltipMixin   |
| `tooltip-delay`    | tooltipDelay    | TooltipMixin   |
| `tooltip-offset`   | tooltipOffset   | TooltipMixin   |
| `tooltip-no-arrow` | tooltipNoArrow  | TooltipMixin   |
| `tooltip-trigger`  | tooltipTrigger  | TooltipMixin   |

<hr/>

## Exports

| Kind                        | Name              | Declaration | Module                                   | Package |
| --------------------------- | ----------------- | ----------- | ---------------------------------------- | ------- |
| `js`                        | `default`         | IconButton  | src/components/icon-button/IconButton.ts |         |
| `custom-element-definition` | `btu-icon-button` | IconButton  | src/components/icon-button/IconButton.ts |         |
