Astro components
Button
Displays a button or a link that looks like a button.
A flexible button component that can render as a <button> or <a> element. It wraps the UI button and adds additional functionality like icons and external link handling.
Usage
---
import Button from '@/components/Button.astro';
---
<Button>Click me</Button>
<Button href="/about">About Us</Button>
<Button variant="outline" size="sm">Small Outline</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | 'default' | Visual style of the button (e.g., 'default', 'secondary', 'outline', 'ghost', 'link', 'destructive'). |
size | string | 'default' | Size of the button (e.g., 'default', 'sm', 'lg', 'icon'). |
href | string | - | If provided, renders as an anchor tag (<a>). |
as | 'button' | 'a' | - | Explicitly set the element type. derived from href if not set. |
withArrow | boolean | false | If true, displays an arrow icon. |
external | boolean | false | If true, opens link in a new tab (adds target="_blank" and rel="noopener noreferrer"). |
iconClass | string | - | Classes to style the arrow icon. |
class | string | - | Additional CSS classes. |
Examples
With Arrow
<Button withArrow>
Get Started
</Button>External Link
<Button href="https://example.com" external>
External Link
</Button>