Alert

Contextual feedback messages. Built from two Figma components: the Alert states (Primary, Success, Warning, Danger) and the Alerts List (stacked container). All values pulled directly from the LUSTER Figma variables.

There are 9 new messages

State (Variant)

Figma Properties
State: Primary
Background: #F2EDFF
Border: #C5B2FF
Icon / Title: #794DFF
Padding: 20px · Gap: 16px · Border: 2px

Component · Alert States

Four semantic variants. Each maps to a palette family for background, border, icon and title color. Warning uses a dashed border.

There are 9 new messages

Primary

This is a primary alert — check it out!

Success

Click to verify your email

Warning

Access denied, contact support

Danger

Component · Alerts List

A titled container that stacks multiple alerts with a 12px gap (alert/list/gap) — exactly as composed in Figma.

Alerts

There are 9 new messages

This is a primary alert — check it out!

Click to verify your email

Access denied, contact support

Design Tokens

These tokens reflect the Alerts List component (Figma: Alert list) — the titled section container, the stacked list, and the alert items it holds. The list stacks alerts with --alertListGap (12px), distinct from each alert's internal --alertGap (16px).

Token Name	Figma Variable	Default Value
--alertListContent	Alert list/list/content	"Alerts"
--alertListGap	alert/list/gap	12px
--foregroundOnSurface	foreground/on surface (list title)	#24242C
--titleFontSize	Typography/Title/Font/Size	16px
--titleFontLineHeight	Typography/Title/Font/LineHeight	19px
--titleFontWeight	Typography/Title/Font/Weight	700
--sectionBgColor	section/bg/color	#FFFFFF
--sectionPaddingX	section/padding/x	24px
--sectionPaddingY	section/padding/y	24px
--sectionBorderRadius	section/border/radius	0px
--sectionMarginBottom	section/margin-bottom	24px
--sectionShadowColor	section/shadow/color	#CECBDC
--sectionShadowOffsetX	section/shadow/offset-x	0px
--sectionShadowOffsetY	section/shadow/offset-y	0px
--sectionShadowBlur	section/shadow/blur	0px
--alertGap	Alert/Gap	16px
--alertPaddingX	Alert/Padding/X	20px
--alertPaddingY	Alert/Padding/Y	20px
--alertBorderRadius	Alert/Border/Radius	0px
--alertBorderWidth	Alert/Border/Width	2px
--alertPrimaryBgColor	Alert/Primary/Bg/Color	#F2EDFF
--alertPrimaryBorderColor	Alert/Primary/Border/Color	#C5B2FF
--alertPrimaryIconColor	Alert/Primary/Icon/Color	#794DFF
--alertPrimaryTitleFontColor	Alert/Primary/Title/Font/Color	#794DFF
--alertSuccessBgColor	Alert/Success/Bg/Color	#E6FAED
--alertSuccessBorderColor	Alert/Success/Border/Color	#91E8B2
--alertSuccessIconColor	Alert/Success/Icon/Color	#00CA4B
--alertSuccessTitleFontColor	Alert/Success/Title/Font/Color	#00CA4B
--alertWarningBgColor	Alert/Warning/Bg/Color	#FDF7E6
--alertWarningBorderColor	Alert/Warning/Border/Color	#F7DD91
--alertWarningIconColor	Alert/Warning/Icon/Color	#EDB000
--alertWarningTitleFontColor	Alert/Warning/Title/Font/Color	#EDB000
--alertDangerBgColor	Alert/Danger/Bg/Color	#FEE9E9
--alertDangerBorderColor	Alert/Danger/Border/Color	#FAA2A2
--alertDangerIconColor	Alert/Danger/Icon/Color	#F32727
--alertDangerTitleFontColor	Alert/Danger/Title/Font/Color	#F32727
--caption2FontSize	Typography/Caption-2/Font/Size	12px
--caption2FontLineHeight	Typography/Caption-2/Font/LineHeight	14px
--caption2FontWeight	Typography/Caption-2/Font/Weight	700
--bodyFontFamily	Body/Font/Family	Inter

Usage Guidelines

✓ DO

Match the state to intent: Success for confirmation, Danger for errors.

✓ DO

Keep alert copy short and actionable; lead with what happened.

✗ DON'T

Don't stack more than a few alerts — group them in an Alerts List.

✗ DON'T

Don't rely on color alone — always include the icon and text.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import './Alert.css';
import { InboxIcon } from './icons';

export interface AlertProps {
  state?: 'primary' | 'success' | 'warning' | 'danger';
  icon?: React.ReactNode;
  children: React.ReactNode;
}

export const Alert = ({ state = 'primary', icon, children }: AlertProps) => (
  <div className={`alert alert--${state}`} role="alert">
    <span className="alert__icon">{icon ?? <InboxIcon />}</span>
    <span className="alert__title">{children}</span>
  </div>
);

export const AlertsList = ({ title = 'Alerts', children }) => (
  <div className="alerts-list">
    <h3 className="alerts-list__title">{title}</h3>
    {children}
  </div>
);

/* Alert tokens — generated from LUSTER Figma variables */
:root {
  /* Primary */
  --alertPrimaryBgColor: #F2EDFF; --alertPrimaryBorderColor: #C5B2FF; --alertPrimaryIconColor: #794DFF; --alertPrimaryTitleFontColor: #794DFF;
  /* Success */
  --alertSuccessBgColor: #E6FAED; --alertSuccessBorderColor: #91E8B2; --alertSuccessIconColor: #00CA4B; --alertSuccessTitleFontColor: #00CA4B;
  /* Warning */
  --alertWarningBgColor: #FDF7E6; --alertWarningBorderColor: #F7DD91; --alertWarningIconColor: #EDB000; --alertWarningTitleFontColor: #EDB000;
  /* Danger */
  --alertDangerBgColor: #FEE9E9; --alertDangerBorderColor: #FAA2A2; --alertDangerIconColor: #F32727; --alertDangerTitleFontColor: #F32727;
  /* Geometry & type */
  --alertPaddingX: 20px; --alertPaddingY: 20px; --alertGap: 16px; --alertBorderWidth: 2px; --alertBorderRadius: 0px;
  --caption2FontSize: 12px; --caption2FontLineHeight: 14px; --caption2FontWeight: 700; --bodyFontFamily: 'Inter', sans-serif;
  /* Alerts List container (section) + list */
  --alertListGap: 12px;
  --sectionBgColor: #FFFFFF; --sectionPaddingX: 24px; --sectionPaddingY: 24px; --sectionBorderRadius: 0px; --sectionMarginBottom: 24px;
  --foregroundOnSurface: #24242C; --titleFontSize: 16px; --titleFontLineHeight: 19px; --titleFontWeight: 700;
}

.alert {
  display: flex; align-items: center; gap: var(--alertGap);
  padding: var(--alertPaddingY) var(--alertPaddingX);
  border: var(--alertBorderWidth) solid; border-radius: var(--alertBorderRadius);
}
.alert__title {
  font-family: var(--bodyFontFamily);
  font-weight: var(--caption2FontWeight);
  font-size: var(--caption2FontSize);
  line-height: var(--caption2FontLineHeight);
}

.alert--primary { background: var(--alertPrimaryBgColor); border-color: var(--alertPrimaryBorderColor); color: var(--alertPrimaryTitleFontColor); }
.alert--success { background: var(--alertSuccessBgColor); border-color: var(--alertSuccessBorderColor); color: var(--alertSuccessTitleFontColor); }
.alert--warning { background: var(--alertWarningBgColor); border-color: var(--alertWarningBorderColor); color: var(--alertWarningTitleFontColor); border-style: dashed; }
.alert--danger  { background: var(--alertDangerBgColor);  border-color: var(--alertDangerBorderColor);  color: var(--alertDangerTitleFontColor); }
.alert__icon { color: inherit; } /* icon uses the state's icon color token */

.alerts-list {
  display: flex; flex-direction: column; gap: var(--alertListGap);
  background: var(--sectionBgColor);
  padding: var(--sectionPaddingY) var(--sectionPaddingX);
  border-radius: var(--sectionBorderRadius);
}
.alerts-list__title {
  font-family: var(--bodyFontFamily);
  font-size: var(--titleFontSize);
  line-height: var(--titleFontLineHeight);
  font-weight: var(--titleFontWeight);
  color: var(--foregroundOnSurface);
}

<!-- Primary alert -->
<div class="alert alert--primary" role="alert">
  <span class="alert__icon"><!-- inbox svg --></span>
  <span class="alert__title">There are 9 new messages</span>
</div>

<!-- Danger alert -->
<div class="alert alert--danger" role="alert">
  <span class="alert__icon"><!-- inbox svg --></span>
  <span class="alert__title">Access denied, contact support</span>
</div>

import { Alert, AlertsList } from '@luster/ui';

export default function Notifications() {
  return (
    <AlertsList title="Alerts">
      <Alert state="primary">There are 9 new messages</Alert>
      <Alert state="success">Your changes were saved</Alert>
      <Alert state="warning">Click to verify your email</Alert>
      <Alert state="danger">Access denied, contact support</Alert>
    </AlertsList>
  );
}