Vibe UI
Initializing Vibe UI System...
Vibe UI

Button Group

A set of grouped buttons for segmented navigation, view toggling, and multi-option filters.

Button Group

A set of grouped buttons for segmented navigation, view toggling, and multi-option filters.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add button-group button
💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button

Presets

Explore the different preset variants of the Button Group component, featuring smooth sub-pixel active sliding pill indicators across default, glass, retro, and glowing designs.

Default Segmented
Glassmorphic
Retro Neobrutalism
Neon Glow

Layout & Radius Options

Button groups support custom orientations (horizontal and vertical) as well as concentric radius presets (default, sm, lg, full, none).

Icon Only
With Labels

Icons & Status Badges

Button groups seamlessly house leading icon indicators and metadata status badges.

Analytics Dashboard Control Bar

A production-ready SaaS dashboard header combining environment switching, layout toggling, and multi-range date filters into a cohesive control center.

Analytics

Prod
Revenue: $84.2k
Users: 8.9k
+22.5%

IDE Workspace Navigation Sidebar

A real-world vertical icon navigation rail commonly used in developer tools (IDE panels, Figma toolbars, Notion sidebars) with live content drawer switching.

Workspace Sidebar

main branch
packages/ui/src
📄 button-group.tsx
📄 button.tsx
📄 index.ts

Props

PropTypeDefaultDescription
variant"default" | "glass" | "retro" | "glow""default"Visual style theme of the button group container and indicator pill.
radius"default" | "sm" | "lg" | "full" | "none""default"Border radius configuration controlling concentric container and item corner rounding.
orientation"horizontal" | "vertical""horizontal"Layout orientation direction of the button group items.
valuestring-Controlled active value of the selected button group item.
defaultValuestring-Initial default active value when used uncontrolled.
onValueChange(value: string) => void-Event callback invoked when a new item segment is selected.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Button Group | Vibe UI