Alert component

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.

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'

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'

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'

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'

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

close snippet

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

close: Snippet | undefined = undefined

Without preprocess Lapikit

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

API Reference

kit:alert

props	type	description	default
is	enum	HTML element to render.	`'div'`
open	`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`).
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.

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