Hey, heads up!
Something of moderate importance has occurred.
export default function Default() {
return (
<div className="w-full card preset-outlined-surface-950-50 grid grid-cols-1 items-center gap-4 p-4 lg:grid-cols-[1fr_auto]">
<div>
<p className="font-bold">Hey, heads up!</p>
<p className="text-xs opacity-60">Something of moderate importance has occurred.</p>
</div>
<div className="flex gap-1">
<button className="btn preset-tonal hover:preset-filled">Dismiss</button>
</div>
</div>
);
}Hey, heads up!
Something of moderate importance has occurred.
<div class="w-full card preset-outlined-surface-950-50 grid grid-cols-1 items-center gap-4 p-4 lg:grid-cols-[1fr_auto]">
<div>
<p class="font-bold">Hey, heads up!</p>
<p class="text-xs opacity-60">Something of moderate importance has occurred.</p>
</div>
<div class="flex gap-1">
<button class="btn preset-tonal hover:preset-filled">Dismiss</button>
</div>
</div>Styling
For even more customization, try mixing and matching various Presets classes.
Success
The task has been completed successfully.
Warning
Beware of this important notice.
Error
Something has gone wrong.
import { TriangleAlertIcon } from 'lucide-react';
export default function Colors() {
return (
<div className="w-full space-y-8">
{/* Success */}
<div className="card preset-outlined-success-500 grid grid-cols-1 items-center gap-4 p-4 lg:grid-cols-[1fr_auto]">
<div>
<p className="font-bold">Success</p>
<p className="text-xs opacity-60">The task has been completed successfully.</p>
</div>
<div className="flex gap-1">
<button className="btn preset-tonal hover:preset-filled">Dismiss</button>
</div>
</div>
{/* Warning */}
<div className="card preset-outlined-warning-500 grid grid-cols-1 items-center gap-4 p-4 lg:grid-cols-[auto_1fr_auto]">
<TriangleAlertIcon />
<div>
<p className="font-bold">Warning</p>
<p className="text-xs opacity-60">Beware of this important notice.</p>
</div>
<div className="flex gap-1">
<button className="btn preset-tonal hover:preset-filled">Dismiss</button>
</div>
</div>
{/* Error */}
<div className="card preset-outlined-error-500 grid grid-cols-1 items-center gap-4 p-4 lg:grid-cols-[auto_1fr_auto]">
<TriangleAlertIcon />
<div>
<p className="font-bold">Error</p>
<p className="text-xs opacity-60">Something has gone wrong.</p>
</div>
<div className="flex gap-1">
<button className="btn preset-tonal hover:preset-filled">Dismiss</button>
</div>
</div>
</div>
);
}Success
The task has been completed successfully.
Warning
Beware of this important notice.
Error
Something has gone wrong.
<script lang="ts">
import { TriangleAlertIcon } from '@lucide/svelte';
</script>
<div class="w-full space-y-8">
<!-- Success -->
<div class="card preset-outlined-success-500 grid grid-cols-1 items-center gap-4 p-4 lg:grid-cols-[1fr_auto]">
<div>
<p class="font-bold">Success</p>
<p class="text-xs opacity-60">The task has been completed successfully.</p>
</div>
<div class="flex gap-1">
<button class="btn preset-tonal hover:preset-filled">Dismiss</button>
</div>
</div>
<!-- Warning -->
<div class="card preset-outlined-warning-500 grid grid-cols-1 items-center gap-4 p-4 lg:grid-cols-[auto_1fr_auto]">
<TriangleAlertIcon />
<div>
<p class="font-bold">Warning</p>
<p class="text-xs opacity-60">Beware of this important notice.</p>
</div>
<div class="flex gap-1">
<button class="btn preset-tonal hover:preset-filled">Dismiss</button>
</div>
</div>
<!-- Error -->
<div class="card preset-outlined-error-500 grid grid-cols-1 items-center gap-4 p-4 lg:grid-cols-[auto_1fr_auto]">
<TriangleAlertIcon />
<div>
<p class="font-bold">Error</p>
<p class="text-xs opacity-60">Something has gone wrong.</p>
</div>
<div class="flex gap-1">
<button class="btn preset-tonal hover:preset-filled">Dismiss</button>
</div>
</div>
</div>