Dismiss Icon

Provides a compact, accessible dismiss button.

DismissIcon web component

Provides a compact, accessible dismiss button.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Sizes

Use the size that matches the surrounding surface.

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

States

Compare enabled and disabled controls.

<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.

<noora-dismiss-icon size="small" label="Remove item"></noora-dismiss-icon>
<noora-dismiss-icon size="large" label="Close panel"></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

Name	Description
`button`	The native button.

Behavior

Activation emits a `noora-dismiss` event.