Go to AntUIKit homepage

Message

A brief line of feedback at the top of the screen that goes away on its own, for the result of something the reader just did.

Preview in FigmaLLMs

Accessibility

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

What a message renders

  • Each notice is a plain div with role="alert", and a call cannot change the role, so every message is an alert whatever its type. A loading message is announced as assertively as an error one.
  • The container is not a live region. The list around the notices is a bare div with no aria-live and no role. The notice itself is announced when it is inserted, because role="alert" carries its own implicit aria-live="assertive" and aria-atomic="true".
  • An element injected with a role is announced less reliably than a region that was already there. Behavior varies by screen reader and browser pairing. Treat a message as likely to be heard, never as guaranteed, and never as the only place the information exists.
  • There is nothing to focus and nothing to press. A message has no close button and adds nothing to the tab order. The reader cannot close it, pause it or bring it back.
  • The glyph has no name. It is an unlabeled SVG, so the node you pass as content is all a screen reader announces.

A timer is not a reading speed

The default duration is three seconds, counted from the moment the notice appears, not from when anyone started reading. A reader using magnification, a screen reader, a translation layer, or reading at their own pace can miss it, and there is no history and nothing left on screen to go back to.
  • pauseOnHover defaults to true, and it is a pointer feature. It does nothing for a keyboard, a screen reader or a touch screen.
  • WCAG 2.2.1 wants timed content to be turn-off-able, adjustable or extendable. A three-second message with no control is none of the three on its own, so it has to be the redundant copy of something that stays.
  • Where the message is the only copy, give it duration: 0 and close it from your own code on the next meaningful action. A message that outlives its moment is a smaller problem than one that vanishes before it is read.
  • Do not shorten a duration to fit more messages in. Lengthening one costs little, and the reader's attention costs more.

An error needs somewhere permanent too

An error that exists only as a message is an error the reader can lose by looking away. The message is the announcement, not the record.
  • Put the failure where the reader will go looking for it: beside the field that rejected the value, in the panel that failed to load, in the page's own Alert, or in a list they can scroll back through.
  • A message has one line and no actions area. A button you put in content, like Undo, closes with the message, so a keyboard reader may never reach it. Offer the same action somewhere that stays.
  • Reach for Notification when the recovery needs a button, and for Modal when it has to be answered before anything else happens.
  • The same applies to any success the reader may need to cite later, a reference number or an id. Put it on the page.

Color and glyph are never the only signal

type sets a glyph and a color. Neither reaches a screen reader: the glyph has no label and the color is CSS. Two messages that both say “Done”, one green and one red, are the same message.
  • Say the outcome in the words: “Saved” against “Could not save”, not “Done” twice in two colors.
  • Write for a reader who did not see the button. The message is announced on its own, out of context, so “Deleted” needs to say what was deleted.
  • loading needs its word too. “Saving” is the message, and the spinner is decoration.
  • Do not lean on position either. Nothing tells a screen reader the notice was at the top of the viewport.

Focus and contrast

  • Never move focus to a message. It holds nothing focusable, has no close button and closes on a timer, so focus sent there is stranded on an element about to be removed. Moving focus for something the reader did not request is a change of context in its own right.
  • Leave focus where the action left it. Where the action destroyed the focused element (a deleted row, a closed dialog), move focus to a sensible place on the page and let the message do the announcing.
  • Check contrast against the notice, not the page. The notice uses the elevated background (colorBgElevated) and floats over whatever scrolls underneath it. Check text and glyph against that background, in both modes.
  • The status colors are the ones a custom seed moves. A hue picked for brand can fall under 4.5:1 with nothing warning about it. The Tokens tab lists what this component reads.

Motion

  • The notice fades and slides in over motionDurationFast. It is short, and it is the only motion the component has.
  • It can be turned off wholesale with theme={{ token: { motion: false } }}, which is a reasonable answer to a reduced-motion preference. Do it at the provider, not per notice.
  • Reduced motion does not lengthen the timer. A reader who has asked for less motion still gets three seconds, so treat the two separately.
  • Anything you animate inside content is yours to gate behind motion-safe:. The component does not do it for you.
MenuModal
© 2026 AntUIKit . All rights reserved.