Alert

Approval required

This transfer needs a second approver before it can proceed.

Alert communicates a persistent, inline status: a warning above a form, a success confirmation, an error explanation.

Usage

import { Alert } from "@sina-design-system/core";

<Alert variant="warning" title="Approval required">
  This transfer needs a second approver before it can proceed.
</Alert>

Examples

Variants · icon + title + description, never color alone

Heads up

Informational context for the current step.

All set

The action completed successfully.

Requires review

Take a second look before proceeding.

Blocked

This was stopped and announced assertively.

Icon override · custom glyph / hidden (icon={false})

Custom icon

Pass a Phosphor glyph to override the default intent icon.

No icon

Pass icon={false} to omit the leading glyph entirely.

Content shapes · title-only / description-only

Title only

Description only, with no heading line.

Props

Prop	Type	Default	Description
`variant`	`"info" \| "success" \| "warning" \| "danger"`	`"info"`	Severity. Also selects the status glyph.
`title`	`ReactNode`	—	Bold heading for the alert.
`icon`	`PhosphorIcon \| false`	—	Swap the glyph component, or hide it for info/success (keep one for warning/danger).

Two rules for status

Warning and danger alerts always render a bold glyph. You can swap it but not remove it. And never nest one status element inside another: a Badge belongs beside an Alert, not inside it.

Accessibility

Danger alerts use role="alert" (announced assertively); the rest use role="status" (polite). Meaning is carried by icon + title + text, never by color alone.