Alert
Persistent status messaging with semantic titles, descriptions, and optional actions.
Contract
| Axis | Values | Default |
|---|---|---|
variant | neutral, info, success, warning, danger | neutral |
role | native div roles such as status or alert | none |
| parts | Root, Title, Description, Actions | compound API |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/alert.css';Scroll inside the code area to read long lines.
Imports
import { TRAlert } from '@tinyrack/ui/components/alert';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Status variants permalink
All semantic status colors are visible in one vertical scan.
Announcement role recipe permalink
Use status for a polite update, alert only for a new urgent failure, and no live-region role for content already present at page load.
Contextual heading and wrapping actions permalink
Choose the heading level from page context. Actions wrap inside the alert instead of forcing page overflow.
API
Parts and defaults
| Part | Own option or default | Behavior |
|---|---|---|
Root | variant="neutral" | Renders a div and applies the selected status treatment. |
Title | <div /> | Renders the alert heading content. |
Description | <p /> | Renders supporting content. |
Actions | <div /> | Groups optional controls and allows them to wrap. |
Composition and accessibility
Root and Actions forward native div props and React 19 refs. Title and Description support the Base UI render contract when their default elements do not fit the surrounding semantics. Root does not assign a live-region role automatically because announcement urgency depends on application context; choose status, alert, or no live-region role intentionally.