Skip to main content
Pricing

Alert

Free

An inline, contextual message that communicates status, outcome, or important information to the user. Alerts appear within the page flow and persist until dismissed or the condition resolves. Available in four severity levels: Info, Success, Warning, and Error. Use role="alert" for urgent messages that require immediate attention and role="status" for informational updates.

12 variants

Variant
ℹ
Info alert
This is a info message with important context.

Variants

VariantDescriptionWhen to use
InfoBlue-toned alert for neutral, informational messages.Use to surface helpful context, tips, or non-critical updates — "Your trial ends in 7 days".
SuccessGreen-toned alert confirming a completed action.Use after a successful operation — "Changes saved", "Payment received".
WarningAmber-toned alert for conditions that need attention but are not blocking.Use to flag potential issues — "Storage is almost full", "API key expires soon".
ErrorRed-toned alert for failures, blockers, or critical issues.Use when an action has failed or a condition prevents the user from proceeding — "Payment declined", "Connection lost".

Usage Guidelines

Do

Use role="alert" for error and warning messages that require immediate attention.

Don't

Stack more than two alerts in the same area — prioritise the most important.

Do

Use role="status" for informational and success messages.

Don't

Use alerts for promotional content — they are for system-level communication only.

Do

Include an icon that reinforces the severity level visually.

Don't

Omit the severity icon — colour alone is insufficient for colour-blind users.

Do

Provide a clear, concise message that explains the situation and any required action.

Don't

Code

HTML
<div class="lex-alert lex-alert--error" role="alert">
  <svg class="lex-alert__icon" aria-hidden="true"><!-- error icon --></svg>
  <div class="lex-alert__content">
    <p class="lex-alert__title">Payment declined</p>
    <p class="lex-alert__message">
      Your card ending in 4242 was declined. Please update your payment method.
    </p>
  </div>
  <button class="lex-alert__close" aria-label="Dismiss alert">
    <svg aria-hidden="true"><!-- close icon --></svg>
  </button>
</div>

<div class="lex-alert lex-alert--success" role="status">
  <svg class="lex-alert__icon" aria-hidden="true"><!-- check icon --></svg>
  <div class="lex-alert__content">
    <p class="lex-alert__message">Changes saved successfully.</p>
  </div>
</div>
CSS Custom Properties
.lex-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--lex-space-12);
  padding: var(--lex-space-12) var(--lex-space-16);
  border-radius: var(--lex-radius-md);
  border: 1px solid var(--lex-alert-border);
  background: var(--lex-alert-bg);
}

.lex-alert--error {
  --lex-alert-bg: var(--lex-bg-danger-subtle);
  --lex-alert-border: var(--lex-border-danger);
  --lex-alert-icon-color: var(--lex-text-danger);
}

.lex-alert--success {
  --lex-alert-bg: var(--lex-bg-success-subtle);
  --lex-alert-border: var(--lex-border-success);
  --lex-alert-icon-color: var(--lex-text-success);
}

.lex-alert--warning {
  --lex-alert-bg: var(--lex-bg-warning-subtle);
  --lex-alert-border: var(--lex-border-warning);
  --lex-alert-icon-color: var(--lex-text-warning);
}

.lex-alert--info {
  --lex-alert-bg: var(--lex-bg-info-subtle);
  --lex-alert-border: var(--lex-border-info);
  --lex-alert-icon-color: var(--lex-text-info);
}

.lex-alert__icon {
  flex-shrink: 0;
  color: var(--lex-alert-icon-color);
}

.lex-alert__title {
  font-weight: 600;
  font-size: var(--lex-font-size-sm);
  margin: 0 0 var(--lex-space-4);
}

.lex-alert__message {
  font-size: var(--lex-font-size-sm);
  color: var(--lex-text-secondary);
  margin: 0;
}

.lex-alert__close {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--lex-text-muted);
}
React
// Using Lexicon CSS classes with React

export function PaymentError() {
  return (
    <Alert
      severity="error"
      title="Payment declined"
      dismissible
      onDismiss={() => console.log('dismissed')}
    >
      Your card ending in 4242 was declined. Please update your payment method.
    </Alert>
  );
}

export function SaveSuccess() {
  return (
    <Alert severity="success">
      Changes saved successfully.
    </Alert>
  );
}

Design Tokens

TokenValue (dark)Value (light)CSS property
--lex-alert-bg——bg
--lex-alert-border——border
--lex-alert-text——text
--lex-alert-icon-color——color
--lex-alert-radius——radius
--lex-alert-padding——padding

Accessibility

  • Use role="alert" for error and warning alerts — this triggers an assertive live-region announcement.
  • Use role="status" for info and success alerts — this triggers a polite live-region announcement.
  • Include a severity icon with aria-hidden="true" — the role already conveys urgency to screen readers.
  • Dismiss button requires aria-label="Dismiss alert" since it has no visible text.
  • Colour alone must not convey severity — always pair with an icon and descriptive text.

Keyboard Interactions

TabMoves focus to the dismiss button or any interactive element within the alert.
Enter/SpaceActivates the dismiss button when focused.