Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Button Group

Button Group

A container that groups related buttons together with consistent styling.

Installation

npx shadcn@latest add https://ui.saturation.io/r/button-group.json

Usage

1600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { Button } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/ui/button"
2600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import {
3  ButtonGroup,
4  ButtonGroupText,
5  ButtonGroupSeparator
6} 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/ui/button-group"
7 
8600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">export 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">default 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">function Example() {
9  600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">return (
10    600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>
11      600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>Button 1600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>
12      600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>Button 2600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>
13    600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>
14  )
15}

Examples

Orientation

Set the orientation prop to change the button group layout.

Separator

The ButtonGroupSeparator component visually divides buttons within a group.

Split

Create a split button group by adding two buttons separated by a ButtonGroupSeparator.

Live preview
External link

With Tooltips

Create icon-only button groups with tooltips for better accessibility and user experience.

With Dropdown

Create a split button group with a DropdownMenu component.

API Reference

ButtonGroup

The ButtonGroup component is a container that groups related buttons together with consistent styling.

PropTypeDefault
orientation"horizontal" | "vertical""horizontal"

ButtonGroupSeparator

The ButtonGroupSeparator component visually divides buttons within a group.

PropTypeDefault
orientation"horizontal" | "vertical""vertical"

ButtonGroupText

Use this component to display text within a button group.

PropTypeDefault
asChildbooleanfalse

On This Page

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