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. It is the same dismiss button used inside Alert, Chips, Modal and Drawer, and you can use it anywhere you need that control.

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

<Close />

Close Icon

To use your own icon, put it inside the Close component and it replaces the default one.

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" viewBox="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>

Icon Size

The size prop controls the size of the default close icon. It accepts a number, and the default value is 1.5. It has no effect when you use your own icon; set the size on your icon instead.

Svelte 
<Close size={1} />
<Close size={2.5} />

Rounded Corner

The rounded prop sets the border radius of the close button. Available values are "none", "sm", "md" (default), "lg", "xl", "2xl" and "full". The corners are visible when the button has a background, focus ring or border.

Svelte 
<Close rounded="none" class="bg-gray-200" />
<Close rounded="full" class="bg-gray-200" />

Click Handler

Use the onclick prop to run a function when the close button is clicked, for example to hide the element it belongs to. The function receives the MouseEvent.

Svelte 
<script>
  let visible = $state(true);
</script>

{#if visible}
  <div>
    Dismissible content
    <Close onclick={() => visible = false} />
  </div>
{/if}

Customize Style

You can customize the button style simply writing the style classes just like as a native HTML element. Other attributes you add, like id or data-*, are passed to the button too.

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

Accessibility

Close renders a real <button type="button">, so it is reachable with Tab and pressed with Enter or Space. Its name comes from the ariaLabel prop, written as visually hidden text inside the button, which means the name survives even when you replace the icon with your own.

The default is "Close". Say what is being closed whenever the page holds more than one thing that can be dismissed, because a screen reader user hears the name without the surrounding context you can see.

Svelte 
<Close ariaLabel="Dismiss the newsletter popup" />

Closing something is only half the job: focus has to go somewhere sensible afterwards. Modal and Drawer hand focus back to whatever opened them, but in a panel of your own, move focus yourself to the control that opened it, or the keyboard lands back at the top of the page.

Configuration