Button Group — Vanilla

Group of buttons with vanilla HTML. Ensure Rizzo CSS is loaded.

Button Group

Group of buttons with no gap. Use button-group; add button-group--vertical for vertical layout.

Add this component

The command below includes <strong>ButtonGroup</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
Live example

HTML

html html 
<div class="button-group">
  <button type="button" class="btn">One</button>
  <button type="button" class="btn">Two</button>
  <button type="button" class="btn">Three</button>
</div>

<div class="button-group button-group--vertical" style="margin-top: 1rem;">
  <button type="button" class="btn">A</button>
  <button type="button" class="btn">B</button>
</div>

Other frameworks: Astro · Svelte · Vue · React