Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

ButtonGroup

Group related actions with joined borders and consistent sizing.

CoreBasics@gaudi/design-system/core/ButtonGroupView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { ButtonGroup } from '@gaudi/design-system/core/ButtonGroup';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/button-group-collection-toolbar.json.

Usage

import Button from '@gaudi/design-system/core/Button';import { ButtonGroup } from '@gaudi/design-system/core/ButtonGroup';
<ButtonGroup aria-label='Document actions'>  <Button onClick={save}>Save</Button>  <Button variant='outline' onClick={exportDocument}>Export</Button></ButtonGroup>

Examples

Collection toolbar

Storybook

Counts and labels

Storybook

Editor header

Storybook

Inputs and selects

Storybook

Segmented choices

Storybook

Split buttons

Storybook

Steppers and pagination

Storybook

Toolbars

Storybook

Vertical groups

Storybook

API

4 props

Accessibility

Buttons retain independent names and focus targets. Use ToggleGroup when the actions represent a selection.

ToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesDirectionScopes text direction for Gaudi controls that need directional keyboard and placement behavior.DropdownMenuAction menus with keyboard navigation, checkbox choices and destructive actions.8 examplesSelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examplesTooltipBrief contextual help attached to an independently labelled control.4 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examples