saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Button Group

Button Group

Groups related buttons together.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/button-group

Usage

import { ButtonGroup } from "@/components/ui/button-group"
<ButtonGroup>
  <Button>Left</Button>
  <Button>Middle</Button>
  <Button>Right</Button>
</ButtonGroup>

Examples

Orientation

Loading...
Horizontal and vertical layouts.

Separator

Loading...
Buttons with separator.

Split

Loading...
Split button pattern.

With Tooltips

Loading...
Icon buttons with tooltips.

With Dropdown

Loading...
Create a split button group with a DropdownMenu component.

API Reference

PropTypeDefaultDescription
childrenReact.ReactNode—Button elements.
orientation"horizontal" | "vertical""horizontal"Group orientation.

On This Page

  • Installation
  • Usage
  • Examples
  • Orientation
  • Separator
  • Split
  • With Tooltips
  • With Dropdown
  • API Reference

Horizontal

Vertical