Button Component

Semantic button component with variants using theme variables.

Add this component

The command below includes <strong>Button</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

Button variants

Live examples

Sizes:

All buttons use semantic theme variables, have hover and focus states, support disabled, and are keyboard accessible.

Usage

Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.

Astro Vanilla Svelte Vue React

---
import Button from '../components/astro/Button.astro';
---

<Button>Default</Button>
<Button class="btn-primary">Primary</Button>
<Button class="btn-secondary">Secondary</Button>
<Button class="btn-success">Success</Button>
<Button class="btn-outline">Outline</Button>
<Button class="btn-ghost">Ghost</Button>
<Button class="btn-primary btn--sm">Small</Button>
<Button class="btn-primary btn--lg">Large</Button>

<!-- Ensure Rizzo CSS is loaded: <link rel="stylesheet" href="/css/rizzo.min.css" /> -->
<button type="button" class="btn">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-outline">Outline</button>
<button type="button" class="btn btn-ghost">Ghost</button>
<button type="button" class="btn btn-primary btn--sm">Small</button>
<button type="button" class="btn btn-primary btn--lg">Large</button>

<script>
  import { Button } from '$lib/rizzo';
</script>

<Button>Default</Button>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="primary" class="btn--sm">Small</Button>
<Button variant="primary" class="btn--lg">Large</Button>

<script setup>
import Button from '@/components/rizzo/Button.vue';
</script>

<template>
  <Button>Default</Button>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="success">Success</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="primary" class="btn--sm">Small</Button>
  <Button variant="primary" class="btn--lg">Large</Button>
</template>

import { Button } from './components/react';

<Button>Default</Button>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="primary" className="btn--sm">Small</Button>
<Button variant="primary" className="btn--lg">Large</Button>

Variants and sizes

btn — Default
btn-primary — Primary action
btn-secondary — Secondary/muted action
btn-success, btn-warning, btn-error, btn-info — Semantic states
btn-outline — Outlined
btn-ghost — Minimal, transparent until hover
btn--sm, btn--lg — Size modifiers (combine with any variant)

Disabled State

Live Example

Other frameworks: Vanilla · Svelte · Vue · React

Button Component — Astro