Success! Your changes have been saved
This is an alert with icon, title and description.
This Alert has a title and an icon. No description.
Unable to process your payment.
Please verify your billing information and try again.
- Check your card details
- Ensure sufficient funds
- Verify billing address
<script lang="ts">
import * as Alert from "$lib/components/ui/alert/index.js";
import CheckCircleIcon from "phosphor-svelte/lib/CheckCircleIcon";
import PopcornIcon from "phosphor-svelte/lib/PopcornIcon";
import WarningCircleIcon from "phosphor-svelte/lib/WarningCircleIcon";
</script>
<div class="grid w-full max-w-xl items-start gap-4">
<Alert.Root>
<CheckCircleIcon />
<Alert.Title>Success! Your changes have been saved</Alert.Title>
<Alert.Description
>This is an alert with icon, title and description.</Alert.Description
>
</Alert.Root>
<Alert.Root>
<PopcornIcon />
<Alert.Title
>This Alert has a title and an icon. No description.</Alert.Title
>
</Alert.Root>
<Alert.Root variant="destructive">
<WarningCircleIcon />
<Alert.Title>Unable to process your payment.</Alert.Title>
<Alert.Description>
<p>Please verify your billing information and try again.</p>
<ul class="list-inside list-disc text-sm">
<li>Check your card details</li>
<li>Ensure sufficient funds</li>
<li>Verify billing address</li>
</ul>
</Alert.Description>
</Alert.Root>
</div>Installation
pnpm dlx jsrepo@latest add alertnpx jsrepo@latest add alertyarn dlx jsrepo@latest add alertbunx jsrepo@latest add alertCopy and paste the following code into your project.
<script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from '$lib/utils.js';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
data-slot="alert-action"
class={cn('absolute top-2 right-2.5', className)}
{...restProps}
>
{@render children?.()}
</div>
Usage
<script lang="ts">
import * as Alert from '$lib/components/ui/alert/index.js';
</script><Alert.Root>
<Alert.Title>Heads up!</Alert.Title>
<Alert.Description>You can add components to your app using the cli.</Alert.Description>
</Alert.Root>