Button Group

A component that groups related buttons together, providing a cohesive and organized interface for related actions.

Examples

1import { Button, ButtonGroup, FlexBox } from '@sugarcoat/ui'
2
3<FlexBox gap='3' direction='column' justify='center'>
4  <ButtonGroup>
5    <Button>One</Button>
6    <Button>Two</Button>
7    <Button>Three</Button>
8  </ButtonGroup>
9</FlexBox>
10

API Reference

Component	Description
ButtonGroup	A container component that groups related buttons together, providing consistent spacing and visual connection between buttons.

Component Properties

ButtonGroup

Prop	Type	Default	Explanation
`size`	`string`	md	Controls the size of all buttons within the group.
`variant`	`string`	default	The visual style variant applied to all buttons in the group.
`block`	`boolean`	false	When true, the button group will span the full width of its container.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius