Go to AntUIKit homepage

Alert

A message that stays on the page: a status, a warning, a banner across the top of a view. The kit adds a neutral type and a three-level emphasis.

Preview in FigmaLLMs

Accessibility

What Alert does for you, and what it leaves to the page around it.

What Alert renders

The root is a <div> with role="alert" written on it directly. That is an assertive live region: an alert inserted into the page after load interrupts a screen reader with its text, while one that was already there when the page painted is read in document order like any other content.
  • role is a real prop and it overrides the default, so the value you pass wins over role="alert".
  • Pass role="status" when the message is polite: a saved state, a count, anything the reader does not need interrupted mid-sentence. Assertive is for the ones that change what they should do next.
  • An Alert that is part of the page's initial layout does not need to be a live region at all. role="note", or no override and a heading above it, is often more accurate than claiming an interruption that never happens.
  • The status icon is decorative: it repeats what the fill already says, and it has no name of its own. Do not rely on it to carry the status.

Color cannot be the only carrier

type changes the fill and the glyph, and nothing a screen reader can hear. There is no announced word for success, warning or error: the role is the same for all five types. The status has to be in the text.
  • Write the severity into the title. “Payment failed” works read aloud with no color at all, and “Card ending 4242” does not.
  • The icon is the second carrier for sighted readers. It is a shape, so it survives a monochrome display and most color vision deficiencies. Keep showIcon on when the status matters.
  • Do not distinguish two alerts by hue alone. Success and warning next to each other at the same emphasis are one shape apart for most readers and one word apart for all of them, so spend the word.
  • type="default" has no status to lose, which makes it the right pick for content that was only ever being boxed rather than flagged.

Naming the close button

closable renders a real <button type="button">, so it is focusable and it takes Enter and Space. It has no name: the default content is an icon glyph with no aria-label, which leaves an unnamed button and no warning about it.
  • Use the object form and put the label on it: closable={{ "aria-label": "Dismiss" }}. The aria-* and data-* keys on that object land on the button.
  • An aria-label on the Alert itself does not reach the button. It lands on the root, where the role already is.
  • Name it after what closing does. “Dismiss” when the message comes back on the next load, something more specific when it does not.
  • A custom closable.closeIcon that is text rather than a glyph names the button by itself. A glyph, however obvious it looks, does not.
  • Anything you put in action is your own control and brings its own name and focus order with it. Keep the slot to one or two things: the close button is already at the end of that row.

Contrast under strong emphasis

emphasis="strong" is the only look that puts text on a saturated fill, and the readable text color there differs by mode as well as by type. Dark mode's status colors are bright enough for dark text, and light mode's need light text.
  • The kit already makes that choice per type and per mode: info is the one dark enough to keep light text in both. Switch the page between light and dark while reading a strong alert, because a pairing that passes in one mode is not evidence about the other.
  • A link inside a strong alert would keep the link color, which is unreadable on the fill. It takes the alert's text color and an underline instead, and the underline is what still marks it as a link.
  • Buttons in action keep their own colors, so check each one by hand on a strong alert. A theme change can break that pairing later.
  • Every color here comes from the active theme, so check a custom seed yourself. A palette chosen for its hue can fall under 4.5:1 with nothing warning. The Tokens tab lists which tokens this component reads.

Motion on close

Only closing animates. An Alert arriving on the page appears at once, and the one transition is the collapse on close: height, opacity, padding and margin, over motionDurationSlow.
  • The collapse animates the alert's height to zero, so everything below moves up as it runs. A reader mid-click on whatever sits under a dismissed alert can lose their target, so give a closable alert room rather than stacking controls under it.
  • closable.afterClose fires when that collapse has finished. Unmounting on onClose instead cuts the animation off and makes the content below jump rather than slide.
  • Motion turns off everywhere with motion: false in your token file's seed, and a reader who has asked for reduced motion should get that. Anything you animate on top of the alert belongs behind motion-safe:.
  • A closed Alert leaves the DOM, taking its live region with it. If the thing it warned about is still true, the message has to come back from state rather than from the reader remembering it.
AffixAnchor
© 2026 AntUIKit . All rights reserved.