Close Button

A close button to dismiss any component/element in your application.

This is a functional and accessible close button for your Svelte app. It is highly customizable and easy to use. You can use it to close or dismiss modals, popups, or any other elements.

Example

Start by importing the Close button from the component library. This versatile and accessible component makes it easy to add close functionality to modals, popups, or any dismissible elements in the Svelte app.

Svelte 
<script>
  import { Close } from "theui-svelte";
</script>

<Close />

Close Icon

You can easily customize the close button by adding your own icon. Simply place the custom icon code inside the Close component, and it will replace the default icon with your new design. This allows for seamless integration of your preferred style or branding.

You can use svg icon or theui-svelte's Svg component.

Svelte 
<!-- Using HTML svg icon -->
<Close>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" iewBox="0 0 16 16">
    <path d="M16 8A8 ... 0-.708-.708L8 7.293z"/>
  </svg>
</Close>

<!-- Using theui-svelte's Svg component -->
<Close>
  <Svg>
    <path d="M16 8A8 ... 0-.708-.708L8 7.293z"/>
  </Svg>
</Close>

Customize Style

You can customize the button style simply writing the style classes just like as a native HTML element.

Svelte 
<Close class="bg-green-300 text-green-700" />

Accessability

The Close button includes an ariaTitle prop to enhance accessibility by providing a meaningful label for assistive technologies. By default, the value of ariaTitle is set to "Close button". You can customize this value to better suit your application's context if needed.

Svelte 
<Close ariaTitle="Dismiss popup" />

In this example, the button will be labeled as "Dismiss popup" for assistive technologies, making it clear to users what action the button performs.

Configuration