Lapikit

Alert component

Alert

The Alert component displays contextual messages in the user interface: notifications, warnings, confirmations or errors. It can be styled in several variants, states and densities, and is easily integrated using Snippets to enrich its content.

Inform your users of the status of an action or page in your application. It supports states such as info, warning, error, or success to highlight the type of information you want to convey.

Examples of alert

Base

This is the minimal version of an alert. It contains simple text and adopts the default styles (variant filled, density default, neutral state).

Inform your users of the status of an action or page in your application. It supports states such as info, warning, error, or success to highlight the type of information you want to convey.

Variant

The alert can adopt different visual styles via the prop variant:

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

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

An alert with no background

An alert with an outline

An alert with a dashed border

State

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.

A success-style alert

A warning-style alert

An error-style alert

An info-style alert

Density

Prop 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.

This is a compact alert, with reduced margins and padding

This is a basic options alert

This is a comfortable alert, margins and padding are increased

Snippet

The prepend, append and close snippets are used to add custom content:

Icon or avatar on the left (prepend),
Button or action on the right (append),
Custom close icon (close).

These snippets enable you to compose rich alerts without sacrificing structure.

prepend

children

append

Closable

Add the closable prop to allow the user to close the alert manually. A close button is automatically displayed, unless overridden by the close slot.

With this alert system, you can display them optionally. The closable action lets your users hide the alert once they've viewed it.

API Reference

props	type	description	default	type_extend
ref $bindable	HTMLElement	Direct access to DOM element	undefined
is	string	Defines the HTML tag.	div
href	string	If set, transforms alert into clickable link	undefined
open $bindable	boolean	Controls alert display.	true
dark	boolean	Enable dark theme for component.	false
light	boolean	Enable light theme for the component.	false
color	string	Applies a custom color to text or icons.	undefined
background	string	Apply a custom background color.	undefined
variant	enum	Sets the visual style of the alert.	undefined	`outline` \| `text` \| `dash`
density	enum	Controls vertical density	`default`	`compact` \| `comfortable` \| `default`
rounded	string	Controls item rounding (`none`, `sm`, `md`, `lg`, etc.).	`md`
closable	boolean	If true, displays a close button to hide the alert.	false
warning	boolean	Apply a visual style of warning.	false
info	boolean	Applies an informative style.	false
success	boolean	Apply a success style (confirmation, validation, etc.).	false
error	boolean	Apply a visual style of error.	false
prepend	Snippet	Apply a visual style of error.	undefined	Snippet to insert content to the right of the alert (e.g. icon, button, action)
append	Snippet	Snippet to insert content to the left of the alert (e.g. icon or avatar).	undefined
close	Snippet	Snippet to customize the close button (replace default icon).	undefined

Variables CSS

variable	default	description
`–-alert-color`	`–-kit-on-container`	Text color
`–-alert-background`	`–-kit-container`	Background color
`–-alert-radius`	`–-kit-radius-md`	Alert edge radius

To enhance your Alerts, think of Icon for legibility, or Button for integrated actions.