Button

Examples

<Button>Open Dashboard</Button>
<Button variant="outline" leftIcon={<GitHubIcon />}>View on GitHub</Button>
<Button variant="ghost">Cancel</Button>
<Button variant="danger" leftIcon={<Trash2 />}>Delete run</Button>
<IconButton aria-label="Refresh"><RefreshCw /></IconButton>

<Button size="sm">Run backup</Button>
<Button size="lg" rightIcon={<ArrowRight />}>Start backing up</Button>
<Button loading>Backing up</Button>
<Button variant="outline" disabled>Disabled</Button>

import Link from "next/link";
<ButtonLink component={Link} href="/backups" variant="outline">View history</ButtonLink>

Guidelines

• One primary button per view, and it is the action the page exists for. Everything beside it is outline; anything inside a card header or row is ghost or an IconButton.
• Labels are sentence case with a verb first. A leading Lucide icon at 16px is optional; a trailing arrow marks navigation.
• Loading swaps the leading icon for a spinner and keeps the label, so the width does not jump.
• Sizes: 40px by default, sm (32px) inside cards and table rows, lg (48px) in a hero only.
• Links that look like buttons use ButtonLink with component={Link} for client navigation.

Props