Button Group

Say hello to our Button Group, your one-stop-shop for related actions. They love to hang out together, making your life easier.

Example

1  import { 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	The tactical squad. A cohesive assembly of buttons with related functions, neatly grouped together for a more organized and intuitive user interface.
ToggleGroup	The choice hub. A set of toggle buttons grouped together, allowing users to make single or multiple selections in a visually connected cluster.

Component Properties

ButtonGroup

Prop	Type	Default	Explanation
`size`	`string`	md	The size of the whole Button Group
`variant`	`string`	default	The variant of the Buttons inside the group. The values are the same as the Button component.
`color`	`string`	primary	The color of the Buttons inside the group. The values are the same as the Button component.
`block`	`boolean`	false	Make the ButtonGroup and the Button children as block elements, filling the width of its parent.

ToggleGroup

Prop	Type	Default	Explanation
`size`	`string`	md	The size of the whole Button Group
`variant`	`string`	default	The variant of the Buttons inside the group. The values are the same as the Button component.
`color`	`string`	primary	The color of the Buttons inside the group. The values are the same as the Button component.
`select`	`string`	single	The selection type of the ToggleGroup. The values are either 'single' or 'multiple'.
`defaultValue`	`string \| string[]`	-	The default value of the ToggleGroup. The values are either a string or an array of strings.
`value`	`string \| string[]`	-	Same as `defaultValue` but controlled by state.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius