Back to Tuist

DismissIcon

noora/docs/components/dismissicon.md

4.204.01.4 KB
Original Source
<!-- 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

AttributeType or allowed valuesDefaultDescription
sizesmall, large"large"Controls the icon dimensions.
disabledbooleanfalseDisables the button.
labelstring"Dismiss"Sets the accessible label.

Events

EventTypeDescription
noora-dismissCustomEvent<Record<string, never>>Emitted when the dismiss control is activated.

Styling parts

PartDescription
buttonThe 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>