Alert

Alert presents short feedback or status messages with optional icon, title, and content areas.

Overview

Alert styling is split across the root semantic surface and lightweight child parts that mostly inherit root color context.

Public CSS Variables

Changes saved

Variable	Value	Affects
Surface background.`Alert`		No visible change in this state
Foreground color.`Alert`, child parts		No visible change in this state
Border treatment.`Alert`		No visible change in this state
Chroma added to the accent color in the tinted background.`Alert`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Alert: root message surface.
AlertIcon: inherits semantic color.
AlertMain, AlertTitle, AlertContent: mostly inherit root text color and layout rhythm.

State And Variant Interaction

variant changes semantic color family.
appearance changes whether the alert reads as filled or bordered surface.
Child parts inherit color rather than defining separate visual systems.

Examples

.brandAlert {
  --alert-border-color: var(--border-color);
}

.softAlert {
  --alert-background-color: var(--surface-primary);
}

Do Not Override

Do not rely on icon color alone to distinguish severity.
Do not restyle alert into a card-like layout surface without reconsidering component choice.
Do not remove enough contrast that feedback severity becomes ambiguous.