Alert

catnip-alert communicates application state with a semantic intent, an intent-mapped Catnip icon, and an optional assistive-technology announcement. Use it for in-flow feedback such as completed actions, warnings, errors, and contextual information.

Four appearances cover different placement needs. All stay in document flow; the consumer owns placement.

• Banner — prominent feedback in the page layout, with optional title and close button.
• Inline — compact feedback beside or beneath related content.
• Inline inverse — compact feedback on a strong intent-colored background.
• Text — icon and message without a container background.

For viewport overlay feedback, use Toast.

The description prop handles plain text. Use the default slot when the message needs rich content such as a link or action button. Slotted content replaces description.

Live example

Accessibility

• announcement="polite" uses role="status" and aria-atomic="true" for non-urgent updates announced at the next convenient pause.
• announcement="assertive" uses role="alert" and aria-atomic="true" for urgent information that assistive technology should announce immediately.
• announcement="none" is the default and adds no live-region role. Use it when the message is already announced elsewhere or is present before page load.
• Intent controls visual meaning only. Choose announcement urgency from the consequence and timing of the message, not its color.
• Icons are decorative because the title and message carry the meaning. Custom content in leftIconSlot is hidden from assistive technology by the slot wrapper.
• The close button has an accessible name and a visible keyboard focus indicator.