Alert

Playground#

<Alert icon={<InfoIcon />}>
  <AlertTitle>This looks like a scan</AlertTitle>
  <AlertDescription>Some text may be missing. Upload the original file for better results.</AlertDescription>
</Alert>

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i @junco/react @junco/tailwind

import { Alert, AlertTitle, AlertDescription } from "@junco/react";

<Alert color="danger" icon={<AlertIcon />}>
  <AlertTitle>Couldn't read this file</AlertTitle>
  <AlertDescription>Try uploading it again.</AlertDescription>
</Alert>

Examples#

API reference#

Accessibility#

• Danger alerts use role="alert" so they are read out at once; the others use role="status".
• The title says what kind of message it is, so the color is never the only signal.
• For brief feedback after an action, use a toast instead.