Button

Import

import { Button } from '@beanwei/astro-ui'

Usage

Preview

Primary Secondary Destructive Outline Ghost Link

Code

---
import { Button } from '@beanwei/astro-ui'
---

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Icon

Preview

Login with Email

Code

---
import { Button } from '@beanwei/astro-ui'
import { Icon } from 'astro-icon/components'
---

<Button variant="outline" size="icon">
  <Icon name="lucide:chevron-right" />
</Button>
<Button>
  <Icon name="lucide:mail-open" />
  Login with Email
</Button>

As Child

Preview

Home

Code

---
import { Button } from '@beanwei/astro-ui'
---

<Button asChild>
  <a href="/">Home</a>
</Button>