ToggleGroup

Single or multiple pressed choices for view modes and compact formatting controls.

CoreBasics@gaudi/design-system/core/ToggleGroupView in Storybook Source

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 ToggleGroup from '@gaudi/design-system/core/ToggleGroup';

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

Usage

import ToggleGroup from '@gaudi/design-system/core/ToggleGroup';
<ToggleGroup type='single' label='Display' value={view} onValueChange={setView}  options={[{ value: 'list', label: 'List' }, { value: 'grid', label: 'Grid' }]} />

Examples

API

9 props

Accessibility

Each item communicates its pressed state. Choose radio controls when a form requires exactly one persistent choice.

TooltipBrief contextual help attached to an independently labelled control.4 examples PillPill renders compact category and status labels.4 examples AspectRatioKeep media at a stable aspect ratio as its container resizes.1 example AvatarProfile 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 ButtonButton renders the Gaudi action and link-button variants.7 examples ButtonGroupGroup related actions with joined borders and consistent sizing.9 examples

ToggleGroup

Installation

Usage

Examples

Filters

Icon and label switchers

Group variants, spacing, sizes and orientation

Toggle that swaps icon and label

Reactions and counts

Toggle variants, sizes and states

API

Accessibility

Related