Close Button

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

Playground

Experiment with the CloseButton component by adjusting the props below:

Aria Label

Disabled

Dark mode

            
            <CloseButton />

            
            <CloseButton />

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

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

Make close buttons look inactive by adding the disabled prop.

            
            <CloseButton disabled />

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

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

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

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