Skip to content
Atomus

Alert

Inline messages about a page or section.

New tokens available

Atomus 4.0 adds brand and radius modes.

Changes saved

Your workspace settings are up to date.

Trial ends in 3 days

Add a payment method to keep your projects.
AlertLive · light and dark follow the theme switch

Usage

Section titled “Usage”
import { Alert } from '@stanvision/atomus-react';


<Alert color="warning" title="Trial ends in 3 days" onClose={dismiss}>
  Add a payment method to keep your projects.
</Alert>

An inline message about the page or a section.

Provide

Section titled “Provide”
  • color — brand · gray · error · warning · success; variant — subtle (tinted) or outline (Figma: Style).
  • title and children (Figma: Title, Description); actions — up to two small buttons; onClose (Figma: Close).
  • Each colour has its own icon, so meaning never depends on colour alone.

Don’t

Section titled “Don’t”
  • Don’t stack more than two alerts; use toasts for transient confirmations.

In Figma

Section titled “In Figma”

Properties, variants and anatomy for the Figma component are on the Figma reference page. Prop names in React match the Figma property names.