Button

The Button component is used to trigger actions or navigate to other pages.

Usage

import Button from '~/components/ui/Button.astro';

<Button>Click me</Button>
<Button href="/docs">Link Button</Button>

Variants

Buttons come in 5 variants to establish hierarchy.

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="icon"><Icon /></Button>

Sizes

<Button size="sm">Small</Button>
<Button>Medium</Button>
<Button >Large</Button>

Props

Prop	Type	Default	Description
variant	'primary' | 'secondary' | 'outline' | 'ghost' | 'icon'	'primary'	The visual style of the button.
size	'sm' | 'md' | 'lg'	'md'	The size of the button.
href	string	undefined	If provided, the button renders as an <a> tag.
...rest	any	-	Any standard HTML attributes (class, onClick, etc.).