{/* button.mdx */}

import { Title, Subtitle, Meta, Description, Primary, Stories, Controls, Source } from '@storybook/addon-docs/blocks';
import * as comStories from './button.stories.json';
import templateSource from './button.twig?raw';

<Meta of={comStories} name="Docs"/>

<Title />
<Subtitle />
<Description />

> ### [Bootstrap Documentation on Buttons](https://getbootstrap.com/docs/5.3/components/buttons/)
> * [Button tags](https://getbootstrap.com/docs/5.3/components/buttons/#button-tags)
> * [Outline buttons](https://getbootstrap.com/docs/5.3/components/buttons/#outline-buttons)
> * [Sizes](https://getbootstrap.com/docs/5.3/components/buttons/#sizes)

<Primary />

## Properties
<Controls />

<Stories of={comStories} />

## Attributes
* N/A

## Slots
* N/A

## Examples

### Example #1: Circle icon button (pill)
```
{% include "vartheme_bs5_educare:button" with {
  variant: 'btn-primary',
  size: 'btn-md',
  label: 'Read more',
  icon: 'chevron-right',
  icon_first: true,
  icon_circle: true,
  radius: 'rounded-pill'
} %}
```

### Example #2: Link button (opens in a new tab)
```
{% include "vartheme_bs5_educare:button" with {
  variant: 'btn-primary',
  outline: true,
  size: 'btn',
  label: 'Visit site',
  href: 'https://example.com',
  target: 'blank',
  icon: 'box-arrow-up-right',
  icon_first: false,
  alignment: 'inline',
  full_width: false,
  radius: 'rounded'
} %}
```

### Example #3: Large button with icon first
```
{% include "vartheme_bs5_educare:button" with {
  variant: 'btn-dark',
  size: 'btn-lg',
  label: 'Download',
  icon: 'download',
  icon_first: true,
  full_width: false,
  radius: 'rounded-pill'
} %}
```

### Example #4: Full width button
```
{% include "vartheme_bs5_educare:button" with {
  variant: 'btn-primary',
  size: 'btn-md',
  label: 'Submit',
  full_width: true,
  radius: 'rounded'
} %}
```

## Source code
[//]: # (Twig Template source code)
<Source code={templateSource} />