Components

Alert component

On this page

The kit:alert component displays a contextual message to the user. It supports multiple tones, visual variants, and optional snippets for custom prepend, append, and close content. It is ideal for providing feedback, warnings, or important information in a way that stands out from the rest of the interface.

Your session will expire in 10 minutes. Save your work.

Changes saved successfully.

This action cannot be undone.

Failed to connect to the server. Please try again.

<script lang="ts">
	import { CircleCheck, Info, TriangleAlert, CircleX } from 'lucide-svelte';
</script>

<div style="display: flex; flex-direction: column; gap: 0.75rem;">
	<kit:alert tone="info">
		{#snippet prepend()}
			<kit:icon><Info /></kit:icon>
		{/snippet}
		Your session will expire in 10 minutes. Save your work.
	</kit:alert>

	<kit:alert tone="success">
		{#snippet prepend()}
			<kit:icon><CircleCheck /></kit:icon>
		{/snippet}
		Changes saved successfully.
	</kit:alert>

	<kit:alert tone="warning">
		{#snippet prepend()}
			<kit:icon><TriangleAlert /></kit:icon>
		{/snippet}
		This action cannot be undone.
	</kit:alert>

	<kit:alert tone="error">
		{#snippet prepend()}
			<kit:icon><CircleX /></kit:icon>
		{/snippet}
		Failed to connect to the server. Please try again.
	</kit:alert>
</div>

kit:alert renders as a <div role="alert"> by default. It has no internal logic beyond visibility the open prop controls whether it is rendered, and closable adds a close button that sets open to false.

The tone can be set via the tone prop or using the boolean shorthand props info, success, warning, and error.

Examples of alert

Tones

For greater expressiveness, an alert can be marked by a status: info, success, warning, error. Each state applies a color and a contextual icon to convey the right signal to the user.

tone: 'default' | 'info' | 'success' | 'warning' | 'error' = 'default'

<div style="display: flex; flex-direction: column; gap: 0.75rem;">
	<kit:alert>Default tone — neutral feedback or general information.</kit:alert>
	<kit:alert tone="info">Info tone — informational messages and tips.</kit:alert>
	<kit:alert tone="success">Success tone — operation completed successfully.</kit:alert>
	<kit:alert tone="warning">Warning tone — potential issue that needs attention.</kit:alert>
	<kit:alert tone="error">Error tone — something went wrong, action required.</kit:alert>
</div>

Variants

The kit:alert can adopt different visual styles via the props variant:

filled (default): solid background.
outline: visible border.
text : transparent background.

These variants can be adapted to different visual contexts or levels of importance.

variant: 'filled' | 'outline' | 'text' = 'filled'

<div style="display: flex; flex-direction: column; gap: 0.75rem;">
	<kit:alert tone="info" variant="filled">Filled — default background with tone color.</kit:alert>
	<kit:alert tone="info" variant="outline"
		>Outline — transparent background with a colored left border.</kit:alert
	>
	<kit:alert tone="info" variant="text">Text — no background or border, tone color only.</kit:alert>
</div>

Density

Props density lets you control the vertical size of the alert:

compact: reduced margins and padding, useful for lists or tables.
comfortable: a visual compromise.
default: standard spacing.

Ideal for adapting alerts to different levels of hierarchy or UI density.

density: 'compact' | 'default' | 'comfortable' = 'default'

<div style="display: flex; flex-direction: column; gap: 0.75rem;">
	<kit:alert tone="info" density="compact">Compact — reduced padding, tighter layout.</kit:alert>
	<kit:alert tone="info">Default — standard padding.</kit:alert>
	<kit:alert tone="info" density="comfortable"
		>Comfortable — more breathing room around the content.</kit:alert
	>
</div>

closable

Add closable to display a close button. The open prop is bindable so you can react to the dismissal externally.

open: boolean = true
closable: boolean = 'false'

<script lang="ts">
	let open = $state(true);
</script>

<div style="display: flex; flex-direction: column; gap: 0.75rem;">
	<kit:alert tone="warning" closable bind:open>
		Dismiss this alert by clicking the close button.
	</kit:alert>

	{#if !open}
		<kit:btn onclick={() => (open = true)}>Restore alert</kit:btn>
	{/if}
</div>

prepend and append snippets

Use prepend to add an icon or element before the content, and append to add one after for example a link or action button.

prepend: Snippet | undefined = undefined
append: Snippet | undefined = undefined

<script lang="ts">
	import { ShieldCheck, ExternalLink } from 'lucide-svelte';
</script>

<kit:alert tone="success">
	{#snippet prepend()}
		<kit:icon><ShieldCheck /></kit:icon>
	{/snippet}

	Your account is verified and secure.

	{#snippet append()}
		<kit:btn
			style="display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; background: none; border: none; color: inherit; cursor: pointer; padding: 0; font: inherit;"
		>
			Details <kit:icon size="sm"><ExternalLink /></kit:icon>
		</kit:btn>
	{/snippet}
</kit:alert>

close snippet

Use the close snippet to replace the default × character with a custom close element.

close: Snippet | undefined = undefined

<script lang="ts">
	import { X } from 'lucide-svelte';
</script>

<kit:alert tone="info" closable>
	{#snippet close()}
		<kit:icon size="sm"><X /></kit:icon>
	{/snippet}
	Custom close button with an icon from lucide-svelte.
</kit:alert>

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the component directly:

import { Alert } from 'lapikit/components';

API Reference

kit:alert

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element to render.	`'div'`
s-class	enum	Sets className on alert.
s-style	enum	Sets styles on alert.
open $bindable	`boolean`	Controls visibility. Bindable.	`true`
closable	`boolean`	Adds a close button that sets `open` to `false`.	`false`
variant	enum	Visual style of the alert.	`'filled'`
density	enum	Spacing inside the alert.	`'default'`
tone	enum	Semantic color tone.	`'default'`
rounded	enum	Border radius.	`'md'`
color	`string`	Foreground color override (`--kit-alert-fg`).
background	`string`	Background color override (`--kit-alert-bg`).
size	enum	Sizing height, font and gap for alert.	`'md'`
prepend	`Snippet`	Content rendered before the main text.
append	`Snippet`	Content rendered after the main text.
close	`Snippet`	Custom content inside the close button.
children	`Snippet`	Main alert content.
multiline	`boolean`	Define alert message on one or more line.
elevation	`ElevationState`enum	Add shadow effect.

To enhance your kit:alert, think of Icon for legibility, or Button for integrated actions.