Button
Semantic button component with variants using theme variables
Same BEM classes and behavior as Astro, Svelte, and React.
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.
pnpm dlx rizzo-css add Button
bunx rizzo-css add Button
Live examples
Vue
Sizes:
Usage
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>
Other frameworks: Astro · Vanilla · Svelte · React
npm 
pnpm 
yarn 
bun