Components / Actions
Button
Filled, tonal, outlined and minimal buttons with intents, sizes, icons and a loading state. Renders a link when given an href.
@ruckc/truss-ui Actions
Import
import { Button } from '@ruckc/truss-ui';Playground
variant
intent
size
anchor
API
With `href` the button renders an `<a>` and accepts anchor attributes (`target`, `rel`, `download`, ...). A `disabled` or `loading` link falls back to a real `<button>` (no navigation is possible, and the disabled state is exposed natively); anchor-only attributes are not forwarded in that case.
Also accepts every attribute of HTMLAnchorAttributes</code>, <code>HTMLButtonAttributes, applied to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'filled' | 'tonal' | 'outlined' | 'minimal' | 'filled' | 'tonal' | 'outlined' | 'minimal' | 'filled' | Visual style of the control. |
intent | Intent | 'primary' | Semantic colour: `primary`, `neutral`, `success`, `warning` or `danger`. |
size | 'sm' | 'md' | 'lg' | 'sm' | 'md' | 'lg' | 'md' | Control size: `sm` (24px), `md` (32px, default) or `lg` (40px). |
icon | IconSource | — | A built-in glyph name, a `{ path, viewBox? }` definition or a snippet. |
rightIcon | IconSource | — | Name of a built-in icon shown after the label. |
loading | boolean | false | Shows a spinner and blocks interaction. |
shortcut | string | — | A key combination (`mod+s`) shown in a hover/focus tooltip beside the label, never inline, and exposed as `aria-keyshortcuts`. Display only: bind the key with `registerCommand` or `hotkeys`. |
children snippet | Snippet | — | Content, as a Svelte snippet. |
href | string | undefined | — | Renders the element as a link to this URL. |
disabled | boolean | — | Disables the control: it cannot be focused, changed or activated. |
type | undefined | 'button' | |
target | never | — | |
rel | never | — | |
download | never | — | |
hreflang | never | — |