Alert

An inline message for contextual feedback. Alerts surface important information without interrupting the user's workflow.

Preview

New version available

Lexicon v1.1 includes new components and performance improvements.

Changes saved

Your settings have been updated successfully.

Storage almost full

You've used 90% of your storage. Consider upgrading your plan.

Payment failed

Your card was declined. Please update your payment method.

Maintenance scheduled

The system will be briefly unavailable on Sunday at 02:00 UTC.

Variants

• Info -- blue tint. General information or updates.
• Success -- green tint. Positive confirmations.
• Warning -- amber tint. Cautionary messages.
• Error -- red tint. Problems or failures requiring attention.
• Neutral -- grey tint. System or non-semantic messages.

Props

Prop	Type	Default	Description
variant	'info' | 'success' | 'warning' | 'error' | 'neutral'	'info'	Semantic colour
title	string	--	Bold heading text
description	string	--	Body text
icon	ReactNode	auto	Leading icon (defaults to variant icon)
dismissible	boolean	false	Shows dismiss button
onDismiss	() => void	--	Dismiss callback

Code example

React

import { Alert } from '@thepace/lexicon/components';

<Alert variant="success" title="Changes saved"
       description="Your settings have been updated." dismissible />

Vanilla HTML

<div class="lex-alert lex-alert--success" role="alert">
  <span class="lex-alert__icon"><!-- icon SVG --></span>
  <div class="lex-alert__content">
    <div class="lex-alert__title">Changes saved</div>
    <div class="lex-alert__description">Your settings have been updated.</div>
  </div>
  <button class="lex-alert__dismiss" aria-label="Dismiss">×</button>
</div>

CSS class reference

Class	Purpose
.lex-alert	Base alert styles
.lex-alert--info	Info variant
.lex-alert--success	Success variant
.lex-alert--warning	Warning variant
.lex-alert--error	Error variant
.lex-alert--neutral	Neutral variant
.lex-alert__icon	Icon container
.lex-alert__content	Title + description container
.lex-alert__title	Bold title
.lex-alert__description	Body text
.lex-alert__dismiss	Dismiss button

Accessibility

• Uses role="alert" for important messages or role="status" for passive updates.
• Error and warning alerts should use aria-live="assertive".
• Dismiss button has aria-label="Dismiss".
• Colour is never the only indicator — each variant includes a unique icon.

Guidelines

Do

• Include both a title and description for clarity.
• Use the dismiss button for non-critical alerts users can acknowledge.
• Place alerts near the content they relate to.

Don't

• Don't use alerts for validation errors on individual fields — use inline error text.
• Don't stack more than 2 persistent alerts — combine or prioritise.