Components
Alert
A short status message with a title and description.
Saved
Your changes are stored.
Could not save
Try again in a moment.
Check this first
This may need a closer look before you continue.
Usage
import { Alert, AlertDescription, AlertTitle } from "@sophic/portal-ui";<Alert>
<AlertTitle>Saved</AlertTitle>
<AlertDescription>Your changes are stored.</AlertDescription>
</Alert><Alert variant="destructive">
<AlertTitle>Could not save</AlertTitle>
<AlertDescription>Try again in a moment.</AlertDescription>
</Alert><Alert variant="warning">
<AlertTitle>Check this first</AlertTitle>
<AlertDescription>
This may need a closer look before you continue.
</AlertDescription>
</Alert>Put an icon as the first child when the message needs a mark. AlertAction
sits in the top-right corner.
Props
Alert also accepts every native <div> attribute. role defaults to
alert; pass role="status" for a message that should not interrupt.
Prop
Type
Default
Changelog
- 30 September 2026 — Spacing and type use the shared tokens. Full notes
- 30 September 2026 — Title is semibold, with more space above the description. Full notes
- 30 September 2026 —
warningis a caution wash. Full notes - 30 September 2026 — Added. Full notes