Neutral Button

Provides a low-emphasis compact control.

NeutralButton web component

Provides a low-emphasis compact control.

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>

Attributes

Attribute	Type or allowed values	Default	Description
`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.

Styling parts

Name	Description
`control`	The native link or button.