ButtonGroup
A group of buttons with a shared size.
Pass Button elements and Popover with a Button in Popover.Trigger as children. Set the shared size on the group — it applies to every button, including the menu trigger.
Live example
Example controls
Usage
import { Button, ButtonGroup, Popover } from '@prosazhin/pbcomponents';
<ButtonGroup size='m'>
<Button theme='border'>One</Button>
<Button theme='border'>Two</Button>
<Popover>
<Popover.Trigger>
<Button theme='border'>Three</Button>
</Popover.Trigger>
<Popover.Content>
<Popover.Item>One</Popover.Item>
<Popover.Item>Two</Popover.Item>
<Popover.Item>Three</Popover.Item>
</Popover.Content>
</Popover>
</ButtonGroup>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | Button[] | Popover[] | Buttons and menus (Popover with a Button in Popover.Trigger); all get the group size. | — |
size | 'xs' | 's' | 'm' | 'l'xs · s · m · l | Component size. | m |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.