<!-- AUTO-GENERATED by packages/components/bin/generate-skill-component-catalog.js. Do not edit by hand. -->

# r-icon-button

An icon button is a button that contains only an icon and is used to trigger an action.

Example
```
<r-icon-button name="cross" label="Close dialog"></r-icon-button>
<r-icon-button name="search" label="Search" variant="contained"></r-icon-button>
<r-icon-button name="settings" label="Settings" disabled></r-icon-button>
```

## class: `RIconButton`, `r-icon-button`

### Fields

| Name               | Privacy | Type                                     | Default      | Description                                                                                                                                                                                                                               | Inherited From |
| ------------------ | ------- | ---------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `disabled`         |         | `boolean`                                |              | Prevents user interaction and applies disabled style.                                                                                                                                                                                     |                |
| `label`            |         | `string`                                 |              | The label for the button, used for accessibility.<br>This label is not visible on the button itself.<br>It is recommended to provide a label for screen readers.<br>If not provided, the button will be considered as having no label. |                |
| `name`             |         | `string`                                 |              | Name of the icon to display within the button.                                                                                                                                                                                            |                |
| `rAriaDescription` |         | `string`                                 |              | Sets string value for `aria-description` attribute                                                                                                                                                                                        |                |
| `rTabindex`        |         | `number`                                 |              | Defines the tabindex of the button for keyboard navigation.                                                                                                                                                                               |                |
| `size`             |         | `"l" \| "m" \| "s"`                      | `'m'`        | Defines the size of the icon used within the button.                                                                                                                                                                                      |                |
| `tooltipPosition`  |         | `"bottom" \| "left" \| "right" \| "top"` | `'top'`      |                                                                                                                                                                                                                                           |                |
| `tooltipText`      |         | `string`                                 |              |                                                                                                                                                                                                                                           |                |
| `variant`          |         | `"contained" \| "standard"`              | `'standard'` | Defines the visual style of the button.<br>\- `standard`: Default button style.<br>\- `contained`: Button with a contained background.                                                                                                  |                |

### Methods

| Name           | Privacy | Description                  | Parameters | Return          | Inherited From |
| -------------- | ------- | ---------------------------- | ---------- | --------------- | -------------- |
| `setBlur`      |         | Remove focus from the button |            | `Promise<void>` |                |
| `setFocus`     |         | Set focus on the button      |            | `Promise<void>` |                |
| `triggerClick` |         | Simulate a button click      |            | `Promise<void>` |                |

### Events

| Name     | Type               | Description                    | Inherited From |
| -------- | ------------------ | ------------------------------ | -------------- |
| `rClick` | `CustomEvent<any>` | Emits `rClick` event on click. |                |

### Attributes

| Name                 | Field            | Inherited From |
| -------------------- | ---------------- | -------------- |
| `disabled`           | disabled         |                |
| `label`              | label            |                |
| `name`               | name             |                |
| `r-aria-description` | rAriaDescription |                |
| `r-tabindex`         | rTabindex        |                |
| `size`               | size             |                |
| `tooltip-position`   | tooltipPosition  |                |
| `tooltip-text`       | tooltipText      |                |
| `variant`            | variant          |                |

### Slots

| Name | Description                                   |
| ---- | --------------------------------------------- |
|      | The icon element to display inside the button |

<hr/>

## Exports

| Kind                        | Name            | Declaration | Module | Package |
| --------------------------- | --------------- | ----------- | ------ | ------- |
| `js`                        | `RIconButton`   | RIconButton |        |         |
| `custom-element-definition` | `r-icon-button` | RIconButton |        |         |