Feedback and states · §5.17

Alert

An inline notice inside staff pages.

Variant
Theme
Contrast
Language
Motion
Text size

Code

<Alert variant="info"><InfoIcon /><AlertTitle>…</AlertTitle><AlertDescription>…</AlertDescription></Alert>

Accessibility

  • Icon and title; the tone never carries the meaning alone.

Usage

Do

  • Staff and admin notices inside a page.

Don't

  • Don't use for department load (use Banner).

Platforms

Web
apps/web/components/ui/alert.tsx
iOS
SwiftUI GroupBox
Android
Compose Card with an icon