Click the × on the yellow inline alert. Placement names it: the top strip is a banner, the tinted note in the flow is a callout
Inline Alert vs. Callout vs. Banner
/ <Alert severity="warning"> · <Alert type="warning" /> /
also called inline alert, inline notification, callout, admonition, notice, warning box, announcement banner, notification banner, site alert, status banner
“The yellow warning box” is an inline alert: a notice that sits in the content flow and stays until it is resolved or dismissed (Material UI <Alert severity="warning">, Ant Design <Alert type="warning" />). The same-looking box that was authored with the page, sits next to the content it qualifies, and usually cannot be closed is a callout — an admonition in docs and Markdown, where GitHub writes it as > [!WARNING]. The prominent full-width message across the very top of the page or site is a banner, also called a site alert. Neither is a toast, which floats above the layout and leaves by itself, and neither is a macOS alert, which is a modal window that blocks you until you answer. The trap worth knowing: role="banner" is NOT the role for an announcement banner — it is the landmark for the site header, so leave the banner as plain markup and add role="alert" or role="status" only when the message appears dynamically.
If you called it…
…you meant Inline Alert vs. Callout vs. Banner.
Anatomy — every part, named
- 1Accent border
border-inline-start“The colored line down the left side of the box” is the accent border (the leading accent bar) — border-inline-start, so it flips to the right edge in right-to-left layouts.
- 2Severity surface
variant="standard"“The pale yellow background behind the warning” is the severity surface — one tinted container treatment that changes with the severity (standard, outlined, or filled). The blue banner and the yellow alert are the same treatment at two severities.
- 3Severity indicator
severity="warning"“The little warning triangle at the left” is the severity indicator — the icon and the color, picked together by severity (Material UI) or type (Ant Design), never by color alone.
- 4Dismiss control
onClose“The little x on the right of the notice” is the dismiss control. Having one is what makes a notice an alert or a banner rather than a permanent callout.
- 5Alert action
action“The learn more link at the end of the warning box” is the alert action — one concise follow-up such as Review settings, in the action slot.
Prompt — paste into your agent
Build an Inline Alert with Material UI <Alert severity="warning"> inside the content flow. Give it a lightly tinted warning surface, a matching severity icon, a narrow border-inline-start accent, one concise message, and an optional trailing action; add a dismiss control only if hiding the notice is safe. If the message is inserted dynamically, use role="alert" only for urgent interruption and role="status" for advisory updates; a static callout present on page load does not need a live region role.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my inline alert / callout / announcement banner (MUI Alert, Ant Design Alert, aria-live regions). Rule out: role="banner" put on the notification banner — that is the landmark for the page header, so screen readers announce a second site header instead of a message; role="alert" left on a notice that is already in the DOM at page load, so it interrupts on every navigation; a message injected together with its live region node, which some browser and screen-reader pairs fail to announce (rendering the empty region first, then setting its text, is the reliable route); severity carried by CSS color alone, so the icon and the text still say the wrong thing; the dismiss control unmounting the notice while focus was inside it, dropping focus to the body; the "banner" rendered inside a scrolling content column so it never actually spans the page. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| Material UI | <Alert severity="warning"> | severity picks the icon AND the color; variant is standard / outlined / filled |
| Ant Design | <Alert type="warning" /> | the same Alert becomes a page-top banner with the banner prop |
| ARIA | role="alert" | assertive live region — only for urgent messages that appear dynamically |
| ARIA | role="status" | polite live region for advisory updates that must not interrupt |
| Markdown | > [!WARNING] | GitHub's callout/admonition marker; siblings are NOTE, TIP, IMPORTANT, CAUTION |
| USWDS | .usa-site-alert | the full-width site alert across the top of every page |
| CSS | border-inline-start | the colored leading accent bar on a callout |
See also
From the maker of this site48h Icons · Custom Apple app icons in 48 hours48hicons.com →