Button Component — Astro

Semantic button component with variants using theme variables

Button Component

Semantic button component with variants using theme variables.

Button Variants

Live Examples

All buttons:

  • Use semantic theme variables
  • Have hover and focus states
  • Support disabled state
  • Are keyboard accessible

Usage

astro astro 
<!-- Using component -->
---
import Button from '../../components/Button.astro';
---

<Button>Click me</Button>

<!-- Using classes -->
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-outline">Outline</button>

Button Variants

  • btn - Default button style
  • btn-primary - Primary action button
  • btn-success - Success/positive action
  • btn-warning - Warning action
  • btn-error - Error/destructive action
  • btn-info - Informational action
  • btn-outline - Outlined button style

Disabled State

Live Example

Svelte & Vanilla: Svelte · Vanilla: same HTML and BEM as in Usage above.