Skip to content

Button

A button component that triggers actions or events.

Examples

Primary

vue
<Button>Button</Button>

Secondary

vue
<Button variant="secondary">Secondary</Button>

Destructive

vue
<Button variant="destructive">Destructive</Button>

Outline

vue
<Button variant="outline">Outline</Button>

Ghost

vue
<Button variant="ghost">Ghost</Button>
vue
<Button variant="link">Link</Button>

Props

Button

PropTypeDefaultDescription
variantdefault | destructive | outline | secondary | ghost | linkdefaultThe visual style of the button.
sizedefault | sm | lg | icondefaultThe size of the button.
asstringbuttonThe HTML element to render as.
asChildbooleanfalseChange the component to the HTML tag or custom component of the only child.

Slots

Button

SlotDescription
defaultThe content of the button.