Neutral Button

Provides a low-emphasis compact control, either icon-only or with a text label.

NeutralButton web component

Provides a low-emphasis compact control, either icon-only or with a text label.

Setup

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

Sizes

Use small, medium, or large compact controls.

<noora-neutral-button size="small" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>
<noora-neutral-button size="medium" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>
<noora-neutral-button size="large" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>

States

Compare enabled and disabled controls.

<noora-neutral-button size="medium" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>
<noora-neutral-button size="medium" aria-label="Next" disabled><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>

Different icons

Use the icon that matches the navigation direction.

<noora-neutral-button size="medium" aria-label="Previous"><noora-icon name="chevron_left"></noora-icon></noora-neutral-button>
<noora-neutral-button size="medium" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>

Text labels

Use a label, optionally with icons, for low-emphasis text actions. The spacing matches the standard button sizes.

<noora-neutral-button size="small" label="Button"></noora-neutral-button>
<noora-neutral-button size="medium" label="Button"></noora-neutral-button>
<noora-neutral-button size="large" label="Button"></noora-neutral-button>
<noora-neutral-button size="large" label="Button"><noora-icon slot="icon-left" name="chevron_left"></noora-icon><noora-icon slot="icon-right" name="chevron_right"></noora-icon></noora-neutral-button>
<noora-neutral-button size="large" label="Button" disabled></noora-neutral-button>

Attributes

Attribute	Type or allowed values	Default	Description
`label`	string	`""`	Sets the visible label. When set, the default slot is replaced by the label and the icon-left/icon-right slots.
`size`	small, medium, large	`"large"`	Controls the dimensions.
`href`	string	`None`	Renders a native link to this location.
`disabled`	boolean	`false`	Disables activation.
`aria-label`	string	`None`	Provides an accessible name.

Slots

Name	Description
`default`	The complete control content when no label is set.
`icon-left`	An icon before the label. Only rendered when a label is set.
`icon-right`	An icon after the label. Only rendered when a label is set.

Styling parts

Name	Description
`control`	The native link or button.