# Close Button

> Bootstrap's close button component built with Svelte 5. Use it to dismiss components like alerts, modals, and toasts.

Source: https://bootstrap-svelte.vercel.app/components/close-button — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Basic Example

```html
<CloseButton />
```

## Dark Variant

This uses the filter property to invert the background-image without overriding its value.

```html
<div class="bg-dark p-3 w-100" data-bs-theme="dark">
  <CloseButton />
  <CloseButton disabled />
</div>
```

## Disabled State

Make close buttons look inactive by adding the `disabled` prop.

```html
<CloseButton disabled />
```

## Accessibility

Close buttons have a default `aria-label` of "Close" for screen readers. You can customize this with the `ariaLabel` prop.

```html
<CloseButton aria-label="Dismiss notification" />
```

## API Reference

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaLabel` | `string` | `'Close'` | Sets the aria-label attribute for screen readers |
| `class` | `string` | `undefined` | Additional CSS classes to apply to the component. |
| `disabled` | `boolean` | `false` | Makes the button appear inactive and prevents interactions |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |

### CSS Classes

The component applies Bootstrap's close button classes based on the provided props:

- `btn-close` - Always applied as the base class