Source

Command Palette

Search for a command to run...

Button-group

Groups related buttons with connected borders and consistent spacing.

About ButtonGroup

Container for visually grouping related buttons with connected borders and consistent spacing. Supports horizontal and vertical orientation layouts.

Installation

Import the ButtonGroup component from LSD:
import { ButtonGroup } from '@nipsys/lsd'

export default function MyComponent() {
  return <ButtonGroup />
}

Usage

The simplest form of the component with default styling.
Horizontal

Variants

Component variants for different visual styles and use cases.
Filled Buttons

Outlined Buttons

Features

Additional features and capabilities of the component.
Vertical

Composition

ButtonGroup
├── ButtonGroupText
└── ButtonGroupSeparator

API Reference

ButtonGroup

orientation
Arrangement direction of buttons within the group.
Type: "horizontal" | "vertical"
groupLabel
Accessible label for screen readers identifying the button group's purpose.
Type: string

ButtonGroupText

asChild
Merges attributes with child element instead of rendering as container.
Type: boolean

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate through buttons in the group• Arrow keys - Navigate through buttons when arranged
ARIA Attributes
Proper ARIA attributes for screen readers
• Uses <fieldset> element with <legend> for semantic grouping• groupLabel prop provides required accessible name for screen readers
Focus States
Visible focus indicators for keyboard users
• Focus moves through buttons sequentially. Focused button receives visible focus indicator.
Calendar