LifeDS

Component

Button Group

Groups related buttons together with merged borders and shared corner radius. Supports horizontal and vertical orientation, separators, text/input/select segments, and split buttons with a dropdown menu or popover.

ButtonGrouporientation: horizontal · vertical
ButtonGroupSeparatorvertical divider between segments
ButtonGroupTextstatic label segment
Playground

Basic — horizontal

outline — default segmented control
secondary — divider between segments is automatic

Size — sm · default · lg · xl

Orientation — vertical

vertical stack

Icon only — toolbar

text formatting
alignment

Stepper — increment/decrement

quantity control
2

Pagination pattern

prev / page / next
Page 3 of 12

With separator

grouped actions split by context — all segments at xl (44px)

With input

input + action — both segments at xl (44px)

Split button

secondary variant + separator + icon action

With select

currency select + amount input + send action

With dropdown menu

primary action + overflow menu

With popover

action + chevron opening a popover form

Nested groups

grouped clusters with gap

Disabled segment

one segment disabled

Tokens used

11 semantic tokens consumed by this component.

--backgroundBackground
bg-background
--foregroundForeground
text-foreground
--mutedMuted
bg-mutedtext-mutedborder-muted
--muted-foregroundMuted Foreground
text-muted-foreground
--accentAccent
bg-accenttext-accentborder-accent
--accent-foregroundAccent Foreground
text-accent-foreground
--secondarySecondary
bg-secondarytext-secondaryborder-secondary
--secondary-foregroundSecondary Foreground
text-secondary-foreground
--borderBorder
border-borderborder
--inputInput
bg-inputborder-input
--ringRing
ring-ringring