<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->

# DismissIcon

Provides a compact, accessible dismiss button.

```html
<noora-dismiss-icon></noora-dismiss-icon>
```

## Attributes

| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `size` | `small`, `large` | `"large"` | Controls the icon dimensions. |
| `disabled` | `boolean` | `false` | Disables the button. |
| `label` | `string` | `"Dismiss"` | Sets the accessible label. |

## Events

| Event | Type | Description |
| --- | --- | --- |
| `noora-dismiss` | `CustomEvent<Record<string, never>>` | Emitted when the dismiss control is activated. |

## Styling parts

| Part | Description |
| --- | --- |
| `button` | The native button. |

Activation emits a `noora-dismiss` event.

## Sizes

Use the size that matches the surrounding surface.

```html
<noora-dismiss-icon size="small"></noora-dismiss-icon>
<noora-dismiss-icon size="large"></noora-dismiss-icon>
```

## States

Compare enabled and disabled controls.

```html
<noora-dismiss-icon label="Dismiss notification"></noora-dismiss-icon>
<noora-dismiss-icon label="Dismiss notification" disabled></noora-dismiss-icon>
```

## Dismiss events

Listen for the noora-dismiss event when the control is activated.

```html
<noora-dismiss-icon size="small" label="Remove item"></noora-dismiss-icon>
<noora-dismiss-icon size="large" label="Close panel"></noora-dismiss-icon>
```
