Alert

Readable inline feedback, with urgency chosen by the application.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Review before publishing

This is illustrative feedback, not a live service.

Changes saved

This is illustrative feedback, not a live service.

Storage is almost full

This is illustrative feedback, not a live service.

Changes could not be saved

Check your connection and try again.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add alert

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Alert variant="warning" title="Storage is almost full">
  Remove unused files or change your plan.
</Alert>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`title / children`	`ReactNode`	`title required`
`variant`	`neutral \| success \| warning \| danger`	`neutral`
`icon`	`ReactNode`	`—`
`role`	`Native ARIA role`	`none`

Accessibility

A static message has no live role by default. Use role=status for a new non-urgent update or role=alert for an urgent error inserted after an action. Existing content is not guaranteed to announce merely by assigning a role. Keep explicit text, recovery actions, and meaningful link names. Icons are decorative. Ref targets the div.