noora/docs/components/linkbutton.md
Presents a text-oriented button or link.
<noora-link-button href="/docs" label="Documentation"></noora-link-button>
| 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. |
| Slot | Description |
|---|---|
icon-left | An icon before the label. |
icon-right | An icon after the label. |
| Part | Description |
|---|---|
control | The native link or button. |
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>
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>
Disable the primary link button.
<noora-link-button label="Disabled" variant="primary" disabled></noora-link-button>
Render an underlined link button.
<noora-link-button href="#" label="Underline" underline></noora-link-button>
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>