# Alert banners

Alert banners: a free component, built on your design tokens, to use for telling people something about the page they are on, from a tip to a failure. Four inline notices (info, success, warning and danger), each with a bold first phrase, one sentence, an optional action and a dismiss button.

Prompt: Add the OpenDesigner component alert-banners to this project: https://opendesigner.dev/library/r/alert-banners.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: info, success, warning, danger, hover, focus, dismissed.

Accessibility: Info, success and warning use role status and the danger notice uses role alert; actions and dismiss are real buttons, and dismissing moves focus to the next notice.

File: https://opendesigner.dev/library/r/alert-banners.html