{/* close-button.mdx */}

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

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

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

> #### [Bootstrap Documentation on Close Button](https://getbootstrap.com/docs/5.3/components/close-button/)
> * [Close Button](https://getbootstrap.com/docs/5.3/components/close-button/#example)
> * [Disabled state](https://getbootstrap.com/docs/5.3/components/close-button/#disabled-state)
> * [Dark variant](https://getbootstrap.com/docs/5.3/components/close-button/#dark-variant)

Provide an option to dismiss or close a component with .btn-close. Default styling is limited, but highly customizable.
Modify the Sass variables to replace the default background-image. Be sure to include text for screen readers,
as we have done with aria-label.


<Primary />

## Properties
<Controls />

## Attributes:
* `attributes`: HTML attributes for the close button element.

## Slots:
* N/A

<Stories of={comStories} />

### Examples:

**Example #1** Dismissible Alert close button
```
{% if dismissible %}
  {% if not dismissible_attributes %}
   {% set dismissible_attributes = create_attribute() %}
  {% endif %}
  {% set dismissible_attributes = dismissible_attributes.setAttribute('data-bs-dismiss', 'alert') %}
  {% include 'vartheme_bs5_educare:close-button' with {
      size: 'btn-sm',
      attributes: dismissible_attributes
    } only %}
{% endif %}
```

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