Skip to main content

Alert

Alert — Prism component.

Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggle
Live demo
Open ↗

When to use

  • Use it when An inline, persistent message about the state of the page or a section.
  • Reach for something else when Transient confirmations — use a toast via ToastProvider.

Accessibility

Status messages use role="status" / aria-live="polite" (or assertive for errors) so updates are announced without stealing focus.

Import

const { Alert } = window.PrismDesignSystem_39d121;

Props

PropTypeRequiredDescription
tone"info" | "positive" | "notice" | "negative"
titlestring
iconReact.ReactNodeOverride the default tone icon.
childrenReact.ReactNode
classNamestring