import { Meta } from '@storybook/addon-docs'
import { DocHeaderLinks } from '../../../docs/blocks/DocHeaderLinks'

<Meta title="FORM COMPONENTS/ButtonGroup/Design Specification" />

# ButtonGroup

ButtonGroup is used to properly space a group of related buttons such as **Save** and **Cancel**

<DocHeaderLinks demoUrl="/?path=/story/form-components-buttongroup-code-examples--button-group-sandbox" figmaUrl="https://www.figma.com/file/YgF3zfnpIDwCZDlwUEP4GR/Kyper-MX-Global-Styles?node-id=21262%3A29167"/>

## Overview
This is a simple component to make it easy to group two or ore buttons together in a horizontal row. Note this not for grouping text buttons or links.

## Spacing
Buttons in a button group are spaced at 12px by default. The one exception to this is when using a transparent button. Transparent buttons are spaced at 8px.
<br></br>

![Button group spacing](/button/doc/assets/button-group-spacing.png)

## Resources
- <a href="https://www.carbondesignsystem.com/components/button/usage" target="_blank">Carbon Design System</a>
- <a href="https://material.io/components/buttons#usage" target="_blank">Google Material</a>