Default
01
Primary action
The standard high-emphasis action for forms and product workflows.
<Button
label="Save & Submit"
as="button"
type="submit"
/>
Base component
Button
Theme-aware, responsive button component.
25 props1 slots0 eventsTheme readyResponsive
Interactive playground
Configure Button
Change any prop and inspect the server-rendered component immediately.
Live preview
<Button
label="Save & Submit"
as="button"
type="submit"
/>Live examples
Designed for real product surfaces
Compare configurations and resize the browser to check responsive behavior.
Outline · Small
02
Secondary navigation
A compact link button with an end icon and restrained emphasis.
<Button
label="Learn more"
as="a"
href="#button-demo"
variant="outline"
size="sm"
icon="icon-[lucide--arrow-right]"
iconPosition="end"
/>Secondary · Large · Pill
03
Prominent rounded action
A large secondary action using the optional pill shape.
<Button
label="Upgrade plan"
as="button"
variant="secondary"
size="lg"
pill="true"
/>Ghost · Icon
04
Accessible icon action
An icon-only control with its accessible name supplied through props.
<Button
label="Open settings"
as="button"
variant="ghost"
size="icon"
icon="icon-[lucide--settings]"
ariaLabel="Open settings"
/>Destructive
05
Dangerous action
A destructive treatment for irreversible or high-risk operations.
<Button
label="Delete project"
as="button"
variant="destructive"
icon="icon-[lucide--trash-2]"
/>Link
06
Inline action
A low-chrome action that behaves and reads like an inline link.
<Button
label="Read documentation"
as="a"
href="#button-demo"
variant="link"
/>Loading
07
Pending action
The button owns its busy state, loading label, spinner, and disabled behavior.
<Button
label="Publish"
loadingLabel="Publishing…"
as="button"
loading="true"
/>Disabled
08
Unavailable action
A visibly and semantically disabled control.
<Button
label="Unavailable action"
as="button"
variant="outline"
disabled="true"
/>Component API
Props and configuration
All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
label | string | "Button" | No |
loadingLabel | string | "Loading…" | No |
description | string | "" | No |
as | string | "" | No |
href | string | "" | No |
target | string | "" | No |
rel | string | "" | No |
type | string | "button" | No |
variant | string | "default" | No |
color | string | "primary" | No |
size | string | "default" | No |
disabled | boolean | false | No |
loading | boolean | false | No |
pill | boolean | false | No |
fullWidth | boolean | false | No |
icon | string | "" | No |
iconPosition | string | "start" | No |
ariaLabel | string | "" | No |
ariaPressed | string | "" | No |
ariaExpanded | string | "" | No |
ariaControls | string | "" | No |
title | string | "" | No |
autofocus | boolean | false | No |
controlClass | string | "" | No |
class | string | "" | No |