@synerise/ds-button-group

---

id: button-group title: Button-Group

A group of buttons is used to wrap a series of buttons.

When to use it

• To combine primary and secondary buttons.
• To allow users to navigate between several separate tabs with options in a main screen.

Component anatomy

This is a complex component, which means that it may consist of other components:

• icon
• button
• utils

Installation

npm i @synerise/ds-button-group

or

yarn add @synerise/ds-button-group

Usage

import ButtonGroup from '@synerise/ds-button-group'


<ButtonGroup
  title={'Some title'}
  size={'large'}
  description={'Some description'}
>
  <Button onClick={() => alert('Clicked!')}>Click me!</Button>
  <Button onClick={() => alert('Clicked!')}>Click me!</Button>
  <Button onClick={() => alert('Clicked!')}>Click me!</Button>
</ButtonGroup>

API

Property	Description	Type	Default
title	The title of the group	string	-
description	The description of the group	string	-
size	Defines the size of the button.	small/ middle / large	middle
buttonsPosition	Defines the horizontal position of buttons.	left / center / right	center
fullWidth	Set buttons width to fill all available space	boolean	false
children	Buttons used in the group	React.ReactNode	-
splitMode	Enables split mode - adds borders to single-icon buttons	boolean	false