<ButtonGroup />

The component which renders Buttons in a group. It allows you to handle an array of actions.


import { ButtonGroup } from '@admin-bro/design-system'


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.

  • in version 3.3

View Source admin-bro-design-system/src/organisms/button-group/button-group.tsx, line 15

Type Definitions


# ButtonGroupProps

Props passed to ButtonGroup element.

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.

View Source admin-bro-design-system/src/organisms/button-group/button-group.types.ts, line 22


# ButtonInGroupProps

Props of buttons in ButtonGroup

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>

View Source admin-bro-design-system/src/organisms/button-group/button-group.types.ts, line 5


Proudly built and maintained by SoftwareBrothers

Software House with a passion for both JavaScript and TypeScript.

See what we do See what we believe in

Proudly built and maintained by