The component which renders Buttons in a group. It allows you to handle an array of actions.
Usage
import { ButtonGroup } from '@admin-bro/design-system'
Props
ButtonGroup can be configured with the default props like size or rounded passed to all
the Buttons via ButtonInProps. These props can be changed for each button by using
ButtonInGroupProps
Full featured example
This is a full featured example with lots of buttons.
- New:
- in version 3.3
- See:
View Source admin-bro-design-system/src/organisms/button-group/button-group.tsx, line 15
Type Definitions
# ButtonGroupProps
Props passed to ButtonGroup element.
Properties:
| Name | Type | Attributes | Description |
|---|---|---|---|
size |
ButtonPropsSize |
<optional> |
Default size for all buttons. The same as ButtonProps.size |
rounded |
ButtonPropsRounded |
<optional> |
Default rounded property for all buttons. The same as ButtonProps.rounded |
buttons |
Array.<ButtonInGroupProps> | Array of top level buttons. |
# ButtonInGroupProps
Props of buttons in ButtonGroup
Properties:
| Name | Type | Attributes | Description |
|---|---|---|---|
icon |
string |
<optional> |
Icon of a button |
label |
string | null |
<optional> |
Label, when set to null, with icon given, button will adjust it's margin |
variant |
VariantType |
<optional> |
Variant compatible with Button variant |
href |
string |
<optional> |
Variant href |
source |
any |
<optional> |
Button source - if set, this will be passed to onClick handler. It can be useful if when, you have one handler function for all the buttons. |
onClick |
function |
<optional> |
On click handler invoked when button has been clicked. |
buttons |
Array.<ButtonInGroupProps> |
<optional> |
Array of nested buttons. |
className |
string |
<optional> |
