Button Group
Clusters related buttons into a single visual group with connected borders.
Clusters related buttons into a single visual group with connected borders.
tsx
import { Button } from "@celestia-project/ui/primitive/button"import { ButtonGroup } from "@celestia-project/ui/composite/button-group"
<ButtonGroup> <Button variant="outline">Year</Button> <Button variant="outline">Month</Button> <Button variant="outline">Day</Button></ButtonGroup>Outline buttons already share a border — skip ButtonGroupSeparator between them.
Use the separator for non-outline variants (default, secondary, ghost) where
segments need an explicit divider.