i

Inline notification

Interrupting and annotating · researched

A status message placed in the page flow next to the content it concerns, in a severity tone.

molecule · also called Alert, Banner, Notification banner, Flash · contains icon, button, link

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Alert native: no antd 6.6.5
Variants
outlined, filled
Sizes
—
States documented
error
Accessibility guidance
no

Div with role=alert. Types success/info/warning/error; banner prop makes a full-width variant.

docs ↗ · code ↗

Carbon

Inline notification subset native: no @carbon/react 1.117.0
Variants
Inline, Actionable, Callout
Sizes
—
States documented
—
Accessibility guidance
yes

Same Notification page as toast. InlineNotification, ActionableNotification and the callout form do the in-page job; also has Informational, Success, Warning, Error statuses. Divs with role=status (inline) or alertdialog (actionable).

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/notification/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Notification"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/notification/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Notification"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

Notification banner native: no govuk-frontend 6.5.1
Variants
default, success
Sizes
—
States documented
default
Accessibility guidance
no

Div with role=region, or role=alert when the role option is set to alert. Related but separate: Error summary, Warning text, Cookie banner, Phase banner.

docs ↗ · code ↗

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. Banner is listed under unbuilt components in the roadmap; nothing in the repo.

Primer

Banner native: no @primer/react 38.40.1
Variants
critical, info, success, upsell, warning
Sizes
—
States documented
default
Accessibility guidance
yes

Banner renders a section landmark. Props include layout (default, compact) and an onDismiss that adds a dismiss button. InlineMessage (experimental; critical, success, unavailable, warning; sizes small, medium) is the in-context companion; Flash is in src/ only.

docs ↗ · code ↗

Spectrum

In-line alert native: no
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
neutral, informative, positive, notice, negative
Sizes
—
States documented
default
Accessibility guidance
no

Variants from the React Spectrum (rsp) page (fillStyle also offers border, subtleFill, boldFill). S2 InlineAlert is a div role=alert; the page-wide banner is a separate design-only Alert banner page (neutral, informative, negative) and SWC 1st-gen sp-alert-banner (neutral, info, negative), neither read as this row.

docs ↗ · code ↗

USWDS

Alert native: no @uswds/uswds 3.14.0
Variants
.usa-alert--info, .usa-alert--warning, .usa-alert--success, .usa-alert--error, .usa-alert--emergency, .usa-alert--slim, .usa-alert--no-icon
Sizes
.usa-alert--slim
States documented
default
Accessibility guidance
yes

Template is a div with an optional role. Separate Site alert (urgent sitewide, usa-site-alert) and Banner (official-site notice, usa-banner) components also exist.

docs ↗ · code ↗

Platform facts

Native elementaria-live region — no elementAPG Alert has no native element: the role alert is set on any element. In-page alerts that the design systems ship (banners) are static content; APG alert is for dynamically announced messages. APG also: 'Alert and Message Dialogs' pattern is for interrupting work.
Baselinenone
APG patternalert
ARIA rolealert
Shipped by6 of 7 systems

Anatomy

  1. alert — APG: the widget has a role of alert; an element that displays a brief, important message.
  2. message — The brief message text.
  3. dismiss control optional — Not in APG; optional addition.

The seven states

default Visible message.
hover Pointer-only CSS state; not defined by APG or HTML.
focus n/a — APG: alerts must not affect keyboard focus.
active n/a — Not defined.
disabled n/a — Not defined.
error n/a — Severity is a content variant, not a defined state.
loading n/a — Not defined.

Every cell was read twice, the second time from raw sources by a separate pass. 1 of 35 fields changed on the second read — open any “corrected” note to see what it said before.