@mekari/mekari-ui-vue/src/components/ButtonGroup/stories/content/ButtonGroupIntroduction.mdx

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

> Available since version: `1.0.0`

> Styling from Mekari UI Toolkit that must be used on this component are (or with its `.scss`):
> - `./css/components/mekari-ui-reboot-bootstrap`
> - `./css/components/mekari-ui-button`
> - `./css/components/mekari-ui-badge`
> - `./css/components/mekari-ui-icon`

Basically, Button Group is a wrapper for buttons and other component so they can be treated as one group. Button Group is divided into: `MButtonGroup` and `MButtonWithBadgeWrapper`.


`MButtonGroup` is based on [BootstrapVue v2.21.1](https://bootstrap-vue.org/docs/components/button-group), so for more information you can see the [BootstrapVue](https://bootstrap-vue.org/docs/components/button-group) page. You can import the `MButtonGroup` component with this:
```js
import { MButtonGroup } from '@mekari/mekari-ui-vue/src';

// For more usage, you can see here:
// https://bootstrap-vue.org/docs/components/button-group
```

`MButtonWithBadgeWrapper` used as a wrapper for button and badge. The main usage of `MButtonWithBadgeWrapper` is on icon inside button with number of notification on it. For real example you can see the [Button with Badge](?path=/docs/button-group--button-with-badge) section below. You can import the `MButtonWithBadgeWrapper` like this:
```js
import { MButtonWithBadgeWrapper } from '@mekari/mekari-ui-vue/src';
```

> On Mekari UI, `MButtonGroup` is called `Split Button Group`, and `MButtonGroup` is called `Button with Badge Button Group`

---