@mekari/mekari-ui-vue/src/components/Badge/stories/content/BadgeIntroduction.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-icons`
> - `./css/components/mekari-ui-badge`

The detail of styling and list of the badge can be seen on [badge styleguide](http://mekari-ui.sleekr.id/docs/1.0/components/badge/). Badge has two sizes: `default` and `slim`. Badge also has lot of variant that can be seen on the component's documentation below. By default, the Badge will not have an icon (especially the reset icon). However, the icon can be added to make the Badge dismissable with `props`, or simply by `default slot`.

Here is the example on how to use the Badge component on your application:
```js
import { MBadge } from from `@mekari/mekari-ui-vue`;
```