Svelte Close Button - Flowbite
The CloseButton components are used throughout the library and you can use it for your app as well
CloseButton #
Use CloseButton
component to close a component.
- Svelte
<script>
import { CloseButton } from 'flowbite-svelte'
export let visible = true;
</script>
{#if visible}
<div
id="banner"
tabindex="-1"
class="flex z-50 gap-8 justify-between items-start py-3 px-4 w-full bg-gray-50 border border-b border-gray-200 sm:items-center dark:border-gray-700 lg:py-4 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 on:click={() => (visible = false)} />
</div>
{/if}
Props #
The component has the following props, type, and default values. See the types page for type information.
Name | Type | Default |
---|---|---|
name | string | 'Close' |