Svelte Close Button - Flowbite
Get started with the CloseButton components to hide a target element using Svelte interactivity
CloseButton #
Use CloseButton
component to close a component.
- Svelte
<script>
import { CloseButton } from "flowbite-svelte";
let visible = $state(true);
</script>
{#if visible}
<div id="banner" tabindex="-1" class="z-50 flex w-full items-start justify-between gap-8 border border-b border-gray-200 bg-gray-50 px-4 py-3 sm:items-center lg:py-4 dark:border-gray-700 dark:bg-gray-800">
<p class="text-sm font-light text-gray-500 dark:text-gray-400">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, ipsa culpa ea laudantium earum quis? Neque unde aliquam enim, distinctio repellendus delectus? Illo numquam ex fugit dolor esse, cumque nesciunt?</p>
<CloseButton onclick={() => (visible = false)} />
</div>
{/if}
See also #
Loading related links...
Component data #
The component has the following props, type, and default values. See types page for type information.