@lion/ui/docs/components/button/extensions.md

A package of extendable web components

---
title: 'Button: Extensions'
parts:
  - Button
  - Extensions
eleventyNavigation:
  key: 'Button: Extensions'
  order: 90
  parent: Button
  title: Extensions
---

# Button: Extensions

```js script
import { html } from '@mdjs/mdjs-preview';
import './assets/bootstrap-button.js';
```

## Bootstrap button

```js preview-story
const capitalize = s => s[0].toUpperCase() + s.slice(1);

export const bootstrapButton = () => {
  const variants = [
    'primary',
    'secondary',
    'success',
    'danger',
    'warning',
    'info',
    'light',
    'dark',
    'link',
  ];

  return html`<div>
    ${variants.map(v => html`<bootstrap-button variant="${v}">${capitalize(v)}</bootstrap-button>`)}
  </div>`;
};
```