Alerts communicate persistent inline feedback with a clear semantic tone, concise text, and accessible announcement options when content changes dynamically.
Overview and decision boundary
Use Alert for inline feedback that should stay in the page flow and remain visible until the content changes.
Do not use Alert as a toast replacement or add dismiss behavior in this slice.
Update available
A new version of the application is available. Refresh to get the latest features and fixes.
1import{Info}from"@nerio-ui/adapters/icons";2import{Alert}from"@nerio-ui/ui";3import{Button}from"@nerio-ui/ui/client";45<Alert6 tone="info"7 icon={Info}8 title="Update available"9 action={<Buttonsize="sm">Refresh</Button>}10>11Anew version of the application is available.Refresh to get the latest features and fixes.12</Alert>
Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
1import{Circle}from'@nerio-ui/adapters/icons';2import{Alert}from'@nerio-ui/ui';34<Alerttone="info"title="Invite sent"icon={Circle}>Collaborators will receive an email shortly.</Alert>
Variants
Tone
Use
neutral
Low-emphasis status or message that does not need a semantic emphasis.
info
Informational context that should remain calm and visible in the page flow.
success
Positive completion or validation feedback.
warning
An issue that needs attention without blocking the entire flow.
danger
An error, destructive outcome, or blocking state.
Anatomy
Slot
Purpose
root
Inline feedback region that applies tone and spacing tokens.
icon
Optional decorative icon rendered through the Nerio icon adapter.
content
Container for the title and descriptive content.
title
Optional short summary that establishes the message hierarchy.
description
Body content that explains the state or provides a next step.
States
State
Behavior
Static
No live-region semantics are applied by default.
Status update
Use role="status" for a dynamic, non-urgent update.
Urgent update
Use role="alert" only when a dynamic error needs immediate announcement.
Motion
State changes should use shared motion tokens and preserve reduced-motion behavior.
Accessibility
Static inline alerts do not announce by default; pass role="status" or role="alert" only for dynamic updates that need announcement.
Tone is supported by text; do not rely on color alone.
Optional icons must pass through the Nerio icon adapter.
API
Prop
Values
Purpose
tone
neutral | info | success | warning | danger
Selects the semantic feedback treatment.
title
ReactNode
Adds a concise summary above the description.
icon
IconComponent
Renders a decorative icon through the Nerio icon adapter.
action
ReactNode
Adds one trailing action for a focused recovery or update.
role
status | alert
Opt into announcement semantics only for dynamic content.
children
ReactNode
Provides the descriptive message content.
className
string
Extends the root without replacing component tokens.
Implementation contract
Contract
Value
Registry item
alert installs five source files into the configured components directory.
Base UI
No interactive primitive required.
Registry dependencies
None.
Package dependencies
clsx, react
Styling contract
Contract
Value
Authoring
Complete, statically detectable Tailwind CSS v4 recipes own component visuals.
Values
Semantic and component --n-* variables remain the canonical customization layer.
Overrides
Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically.
Residual CSS
Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer.
Design notes
Alert is a flat muted surface: semantic color stays on the icon while title and description remain neutral.
Use the message text and optional icon together so status never depends on color alone.
Do / do not
Do
Use Alert for inline validation summaries, persistent notices, and contextual feedback.
Do not
Use Alert as a toast replacement or add dismiss behavior to this static feedback pattern.
