Button

Triggers an action, submits a form, or navigates to another location.

Button web component

Triggers an action, submits a form, or navigates to another location.

Setup

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

Variants

Choose a semantic variant through the variant attribute.

Primary

Secondary

Destructive

<noora-button type="button" variant="primary">Primary</noora-button>
<noora-button type="button" variant="secondary">Secondary</noora-button>
<noora-button type="button" variant="destructive">Destructive</noora-button>

Sizes

Compare the large, medium, and small button sizes.

Large

Medium

Small

<noora-button type="button" size="large">Large</noora-button>
<noora-button type="button" size="medium">Medium</noora-button>
<noora-button type="button" size="small">Small</noora-button>

Disabled

Compare the disabled state across every button variant.

Disabled

<noora-button type="button" variant="primary" disabled>Disabled</noora-button>
<noora-button type="button" variant="secondary" disabled>Disabled</noora-button>
<noora-button type="button" variant="destructive" disabled>Disabled</noora-button>

Icons

Place a chevron on the left, right, or both sides of the label, or render an icon-only button.

Icon

<noora-button type="button">
  <noora-icon slot="icon-left" name="chevron_left"></noora-icon>
  Icon
</noora-button>

<noora-button type="button">
  Icon
  <noora-icon slot="icon-right" name="chevron_right"></noora-icon>
</noora-button>

<noora-button type="button">
  <noora-icon slot="icon-left" name="chevron_left"></noora-icon>
  Icon
  <noora-icon slot="icon-right" name="chevron_right"></noora-icon>
</noora-button>

<noora-button type="button" icon-only aria-label="Previous">
  <noora-icon name="chevron_left"></noora-icon>
</noora-button>

Attributes

Attribute	Type or allowed values	Default	Description
`aria-describedby`	string	`None`	Identifies the element that describes the button.
`aria-label`	string	`None`	Provides an accessible name when visible text is unavailable.
`aria-labelledby`	string	`None`	Identifies the element that labels the button.
`title`	string	`None`	Provides advisory information for the button.
`autofocus`	boolean	`false`	Focuses the button when the page loads.
`disabled`	boolean	`false`	Prevents activation and form submission.
`download`	string	`None`	Downloads the linked resource, optionally using this value as the filename.
`form`	string	`None`	Associates the button with a form by element identifier.
`formaction`	string	`None`	Overrides the associated form action for this submit button.
`formenctype`	string	`None`	Overrides the associated form encoding type for this submit button.
`formmethod`	string	`None`	Overrides the associated form method for this submit button.
`formnovalidate`	boolean	`false`	Skips validation when this button submits its associated form.
`formtarget`	string	`None`	Overrides where the associated form response is displayed.
`href`	string	`""`	Renders the control as a link to this location.
`icon-only`	boolean	`false`	Uses the default slot as the entire button content. An accessible label is required.
`label`	string	`""`	Provides fallback text when the default slot is empty.
`name`	string	`""`	Sets the form field name submitted with the button value.
`rel`	string	`None`	Sets the relationship between the current page and a linked resource.
`size`	small, medium, large	`"large"`	Controls the button dimensions and text size.
`target`	string	`None`	Controls where a linked resource is opened.
`type`	button, reset, submit	`"submit"`	Controls native button behavior when href is absent.
`value`	string	`""`	Sets the form value submitted with the button name.
`variant`	primary, secondary, destructive	`"primary"`	Controls the visual emphasis and semantic intent.

Slots

Name	Description
`default`	The visible label, or the complete content when icon-only is present.
`icon-left`	An icon displayed before the label.
`icon-right`	An icon displayed after the label.

Styling parts

Name	Description
`control`	The native link or button control.

Behavior

The component emits the standard browser click event.

It renders a native link when href is present and the component is enabled. Otherwise, it renders a native button and supports form submission and reset.