Preview

Installation

npx sigma-ui@latest add button-group

Usage

<script setup lang="ts">
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
</script>

<template>
  <ButtonGroup>
    <Button variant="outline">Archive</Button>
    <Button variant="outline">Report</Button>
  </ButtonGroup>
</template>

ButtonGroup joins its children by removing the inner borders and corner radii. Set orientation to horizontal or vertical. Nest groups to add spacing between them.

• ButtonGroupText is static text or an icon inside the group, such as a URL prefix. Use as-child to render a Label.
• ButtonGroupSeparator divides buttons that have no border, such as the secondary variant.

Examples

Orientation

With input

Inputs grow to fill the free space in the group. Wrap ButtonGroupText around a Label with as-child to label the input.

Separator

API Reference

ButtonGroup

Props

Prop	Type	Default
orientation Direction in which the buttons are joined.	"vertical" | "horizontal" | null	"horizontal"

Slots

Slot	Scope
default Buttons, inputs, ButtonGroupText, ButtonGroupSeparator, or nested ButtonGroup components.	-

ButtonGroupSeparator

Props

Prop	Type	Default
orientation Orientation of the component. Either vertical or horizontal. Defaults to horizontal.	DataOrientation	"vertical"
decorative Whether or not the component is purely decorative. <br>When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

ButtonGroupText

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default Static text or an icon, such as a URL prefix or a unit.	-

Accessibility

ButtonGroup renders role="group". Set aria-label or aria-labelledby to describe what the buttons do together. Use ToggleGroup instead when the buttons toggle a state.

A focused child is raised above its siblings, so the focus ring is not hidden behind the next button.

Key	Description
Tab	Moves focus between the controls in the group.
Enter or Space	Activates the focused button.