Skip to content
Components / Composition

Button group

Related actions that belong to one choice.

@fabrials/ui
Loading state

Installation

  1. Import the control from @fabrials/ui, after setting the app up.

    TypeScript
    import { ButtonGroup, Button } from "@fabrials/ui";
  2. Or install it under shadcn's name, so code that imports @/components/ui/button-group gets this control. See shims.

    npx shadcn@latest add @fabrials/button-group

API reference

Prop / exportTypeDescription
orientationhorizontal | verticalDirection of the group.

Behavior

Group actions that change the same subject. Do not group unrelated buttons just to save space.

Accessibility

Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.