Button
A clickable text action element.
<template>
<Button variant="primary" size="md">Button</Button>
</template>Props
| Name | Type | Default |
|---|---|---|
| variant | "link" | "primary" | "outline" | "secondary" | "destructive" | "ghost" | "plain" | "primary" |
| size | "md" | "sm" | "xs" | "md" |
| htmlType | "button" | "submit" | "reset" | "button" |
| ...props | UButton props (loading, block, as, icon, ui, ...) | — |
Slots
| Name | Description |
|---|---|
| default | Button label. |
| leftIcon | Icon before the label. Figma models this as a leftIcon boolean + fixed icon; adapted to a slot to match this codebase's existing icon-slot pattern. |
| rightIcon | Icon after the label. |
Usage
Examples
Primary
The single primary action in a view — save changes, run a scan.
<template>
<Button variant="primary">Button</Button>
</template>Secondary
A secondary action sitting next to a primary button.
<template>
<Button variant="secondary">Cancel</Button>
</template>Outline
A secondary action with a visible border, for a lighter footprint than Secondary.
<template>
<Button variant="outline">Outline</Button>
</template>Ghost
The lowest-emphasis action that still needs its own click target.
<template>
<Button variant="ghost">Ghost</Button>
</template>Destructive
Actions that delete or revoke access — pair with a confirmation step.
<template>
<Button variant="destructive">Delete</Button>
</template>Link
The lowest-emphasis action in a group, styled as plain colored text.
<template>
<Button variant="link">Link</Button>
</template>Plain
An action tightly bound to other content, like a sort icon inline in a table header.
<template>
<Button variant="plain">Plain</Button>
</template>Sizes
The three height steps — xs, sm, and md.
<template>
<Button variant="primary" size="xs">Button</Button>
<Button variant="primary" size="sm">Button</Button>
<Button variant="primary" size="md">Button</Button>
</template>Icons
A leading or trailing icon alongside the label.
<template>
<Button variant="primary" icon="i-lucide-git-compare">Button</Button>
<Button variant="primary" trailing-icon="i-lucide-git-compare">Button</Button>
</template>IconButton
An icon-only button.
<template>
<IconButton icon="i-lucide-git-compare" variant="primary" size="md" />
</template>Props
| Name | Type | Default |
|---|---|---|
| icon | string | — |
| variant | "ghost" | "primary" | "outline" | "secondary" | "plain" | "primary" |
| size | "md" | "sm" | "xs" | "md" |
| htmlType | "button" | "submit" | "reset" | "button" |
Usage
Examples
Primary
The one primary icon action in a view, reserved the same way Button's Primary is.
<template>
<IconButton icon="i-lucide-git-compare" variant="primary" />
</template>Secondary
A secondary icon action next to a primary one.
<template>
<IconButton icon="i-lucide-git-compare" variant="secondary" />
</template>Outline
A secondary icon action with a visible border.
<template>
<IconButton icon="i-lucide-git-compare" variant="outline" />
</template>Ghost
An icon action with no border or fill until interacted with.
<template>
<IconButton icon="i-lucide-git-compare" variant="ghost" />
</template>Plain
An icon tightly bound to other content, with no padding or background.
<template>
<IconButton icon="i-lucide-git-compare" variant="plain" />
</template>