Skip to main content
components

Button Group

A simple way to implement button groups.

Package@g4rcez/componentsSectionDisplay Components

Examples

Basic Button Group

Demonstrates a basic button group by styling individual buttons to appear merged.

Button Group Example
tsx
"use client";
import { Button } from "@g4rcez/components";

function BasicButtonGroup() {
  return (
    <div className="flex">
      <Button theme="muted" className="rounded-l-button" rounded="squared">Merge</Button>
      <Button theme="primary" rounded="squared">Merge</Button>
      <Button theme="muted" className="rounded-r-button" rounded="squared">Button</Button>
    </div>
  );
}

When to use Button Group

Use when

You need the documented Button Group interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Button Group behavior you need.

Accessibility

Keep the Button Group labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

  • Keep keyboard focus visible and follow the documented key commands.
  • Provide an accessible name and connect descriptions or errors to the control.