Form controls

Button

The control a reader presses to do something. It comes in six variants and three sizes, plus a square for an icon alone, shows a spinner while its action runs, and takes an href when it should be a link that looks like a button.

Variants

Sizes

Icon only

size="icon" draws a square that the icon sets, for a control with no words beside it, such as a menu or a settings button next to the theme toggle. Name it with aria-label: the name is read to a screen reader and shown as a hint on hover. Under a touch screen it grows to the control height, like every button.

With icons

Buttons render their children verbatim, so any @lucide/svelte icon drops in alongside text. Spacing is handled by the button itself.

Loading & disabled

As a link

Pass href to render an <a> with the same styling, for navigation that should behave like a real link.

Read the docs

API

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'danger' \| 'ghost' \| 'outline' \| 'violet'`	`'primary'`	Visual style.
`size`	`'sm' \| 'md' \| 'lg' \| 'icon'`	`'md'`	Padding and font size. 'icon' draws a square for an icon alone.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type.
`href`	`string`	no default	Render as an <a> instead of a <button>.
`loading`	`boolean`	`false`	Show a spinner and prevent clicks.
`disabled`	`boolean`	`false`	Disable the button.
`full`	`boolean`	`false`	Stretch to fill the container width.
`onclick`	`(e: MouseEvent) => void`	no default	Click handler.
`hint`	`string \| false`	no default	Words shown on hover and focus. They default to the aria-label, so an icon-only button names itself on screen too. Pass false to show none.
`children` required	`Snippet`	no default	Button content (text and/or icons).
`class`	`string`	no default	Extra classes, appended to the component's own.