Lucent UI
← SplitButtonButtonGroupInput →
✦ LLM-ready

ButtonGroup

atom

Layout wrapper that visually groups Button or SplitButton children with a small token-based gap and flattened inner corner radius so the set reads as a single unit. Works with any variant combination including ghost toolbars.

"Add a ButtonGroup from lucent-ui wrapping three outline Buttons so they appear as a single connected unit."

Usage

React / JSX
import { ButtonGroup, Button } from 'lucent-ui'

<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Center</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

Installation

pnpm add lucent-ui

API Reference

ButtonGroup props — * required

PropTypeDefaultDescription
children*React.ReactNode—Button or SplitButton children to group.