Button — Vanilla
Button variants with vanilla HTML. Ensure Rizzo CSS is loaded.
Button
Semantic button with BEM classes. No JS required for static buttons.
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
npm 
pnpm 
yarn 
bun Button variants
Live examples
Sizes:
Disabled State
Live Example
HTML
Copy the markup below. Ensure Rizzo CSS is loaded.
html html
<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-warning">Warning</button>
<button type="button" class="btn btn-error">Error</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-outline">Outline</button>
<button type="button" class="btn btn-ghost">Ghost</button>
<!-- Sizes: -->
<button type="button" class="btn btn-primary btn--sm">Small</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn--lg">Large</button>
<!-- Disabled: -->
<button type="button" class="btn" disabled>Disabled Default</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>