Alert

An inline notification that stays visible until the user dismisses it or the condition resolves. Use alerts for persistent feedback — validation errors, warnings, or status messages that need to remain on screen. For transient confirmations, use Snackbar instead.

Playground

Your changes have been saved.

default

Your changes have been saved.

success

Your changes have been saved.

warning

Your changes have been saved.

error

Your changes have been saved.

info

Controls

Variant

Appearance

Heading

Title

Icon

Closable

Open

Background

Uppercase

Labels

Theme

HTMLReact

ShareCopy

Usage

<lt-alert variant="success">Changes saved successfully</lt-alert>
<lt-alert variant="warning">Your session expires in 5 minutes</lt-alert>
<lt-alert variant="error">Failed to submit — please try again</lt-alert>
<lt-alert variant="info">A new version is available</lt-alert>

<lt-alert variant="error" heading="Payment failed" closable>
Your card was declined. Please update your billing details.
</lt-alert>

<lt-alert variant="info" closable>This banner can be dismissed</lt-alert>

import { Alert } from '@latty-ds/react';

<Alert variant="success">Changes saved successfully</Alert>
<Alert variant="warning">Your session expires in 5 minutes</Alert>
<Alert variant="error">Failed to submit — please try again</Alert>
<Alert variant="info">A new version is available</Alert>

<Alert variant="error" heading="Payment failed" closable>
Your card was declined. Please update your billing details.
</Alert>

<Alert variant="info" closable>This banner can be dismissed</Alert>

<template>
<lt-alert variant="success">Changes saved successfully</lt-alert>
<lt-alert variant="warning">Your session expires in 5 minutes</lt-alert>
<lt-alert variant="error">Failed to submit — please try again</lt-alert>
<lt-alert variant="info">A new version is available</lt-alert>

<lt-alert variant="error" heading="Payment failed" closable>
Your card was declined. Please update your billing details.
</lt-alert>

<lt-alert variant="info" closable>This banner can be dismissed</lt-alert>

</template>

Alert vs. Snackbar

Both communicate feedback to the user, but they serve different moments:

	Alert	Snackbar
Position	Inline, within page flow	Fixed overlay, bottom of viewport
Lifetime	Persistent — stays until dismissed or condition resolves	Transient — auto-dismisses after a configurable delay
Use when	The message is tied to a specific location on the page (a form field, a section, a card)	Confirming the result of an action the user just took (saved, deleted, copied)
Avoid when	The message is a response to a one-off action and doesn't need to persist	The user needs to read and act on the message before continuing

API