Usage
<Button href="/quickstart">Get started</Button>Use <Button> sparingly. For regular navigation, a plain markdown link is almost always the right call. Reserve buttons for visible CTAs — "Get Started Free", "View on GitHub", "Open Dashboard".
Variants
Three visual weights. Use primary for the main action on a page (one per section), secondary for alternates, and ghost for low-emphasis links.
<Button variant="primary" href="/signup">Sign up free</Button>
<Button variant="secondary" href="/docs">Read the docs</Button>
<Button variant="ghost" href="/pricing">View pricing</Button>Sign up free Read the docs View pricing
Sizes
Three sizes — sm, md (default), lg.
<Button size="sm" href="/docs">Small</Button>
<Button size="md" href="/docs">Medium</Button>
<Button size="lg" href="/docs">Large</Button>Icons
Add a Lucide icon with the icon prop. Default position is end (after the label):
<Button icon="arrow-right" href="/quickstart">Get started</Button>
<Button icon="rocket" iconPosition="start" href="/quickstart">Launch</Button>
<Button icon="download" variant="secondary" href="/downloads">Download</Button>External links
Links starting with http:// or https:// automatically open in a new tab with rel="noopener noreferrer". Override explicitly with the external prop:
<Button href="https://github.com/Codivion/CodivDocs" icon="arrow-right">
View on GitHub
</Button>View on GitHub
When to use
Good use
Hero "Get Started" CTA
"View live demo" on feature pages
"Download SDK" on integration pages
"Open dashboard" for authenticated flows
Avoid
Inline navigation (use markdown links)
Every heading ("Learn more" spam)
Form submissions (use regular form buttons)
Anything the reader would call an "action button" on an app
Props
| Prop | Type | Default | Description |
variant | "primary" | "secondary" | "ghost" | "primary" | Visual weight |
size | "sm" | "md" | "lg" | "md" | Height and padding |
href | string | — | Link destination — renders as <a> or <Link> |
icon | string | — | Lucide icon name or emoji |
iconPosition | "start" | "end" | "end" | Icon position relative to the label |
external | boolean | auto | Force external link behavior (new tab + rel attributes) |