Link Button

Presents a text-oriented button or link.

LinkButton web component

Presents a text-oriented button or link.

Setup

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

Variant

Match the LiveView primary, secondary, and destructive variations.

<noora-link-button href="#" label="Primary" variant="primary"></noora-link-button>
<noora-link-button href="#" label="Secondary" variant="secondary"></noora-link-button>
<noora-link-button href="#" label="Destructive" variant="destructive"></noora-link-button>

Size

Match the LiveView large, medium, and small variations.

<noora-link-button href="#" label="Large" size="large"></noora-link-button>
<noora-link-button href="#" label="Medium" size="medium"></noora-link-button>
<noora-link-button href="#" label="Small" size="small"></noora-link-button>

Disabled

Disable the primary link button.

<noora-link-button label="Disabled" variant="primary" disabled></noora-link-button>

Underline

Render an underlined link button.

<noora-link-button href="#" label="Underline" underline></noora-link-button>

Icon

Match the LiveView left, right, and two-sided icon variations.

<noora-link-button href="#" label="Icon"><noora-icon slot="icon-left" name="chevron_left"></noora-icon></noora-link-button>
<noora-link-button href="#" label="Icon"><noora-icon slot="icon-right" name="chevron_right"></noora-icon></noora-link-button>
<noora-link-button href="#" label="Icon"><noora-icon slot="icon-left" name="chevron_left"></noora-icon><noora-icon slot="icon-right" name="chevron_right"></noora-icon></noora-link-button>

Attributes

Attribute	Type or allowed values	Default	Description
`label`	string	`""`	Sets the visible label.
`variant`	primary, secondary, destructive	`"primary"`	Controls semantic emphasis.
`size`	small, medium, large	`"large"`	Controls dimensions.
`href`	string	`None`	Renders a native link to this location.
`underline`	boolean	`false`	Underlines the label.
`disabled`	boolean	`false`	Disables activation.

Slots

Name	Description
`icon-left`	An icon before the label.
`icon-right`	An icon after the label.

Styling parts

Name	Description
`control`	The native link or button.