Toast

catnip-toast is viewport overlay feedback for a recent user or system action. Catnip positions it at the selected horizontal and vertical edge, and can dismiss it after a duration or from the close button.

Use Alert when the message belongs in the page layout.

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.
• 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.