Featured
AlertsInline Alert
A static status message in four severities, sitting in the flow.
#alert#inline#status
6 frameworksBeginner
Loading…
A page-wide status bar for a condition that is true right now.
<!--
The page-wide status bar: degraded service, trial expiring, region outage. It
is an alert, not a notification - it reflects a condition that is true right
now and stays until it isn't.
Two rules it must not break:
1. It goes FIRST in the DOM, above the header, and it is a real block in the
flow. Never position: fixed. A fixed bar overlaps the top of the page at
200% zoom, where the viewport is a few hundred CSS pixels tall and the bar
is eating a third of it. In flow, the page just starts lower.
2. It is <section> with a label, not <header> or a bare div - a second banner
role on the page confuses landmark navigation.
role="status" and not "alert": it is present on load, where an assertive
region has nothing to announce anyway (it never changed), and where
interrupting the user's first sentence would be gratuitous.
-->
<section class="topbar" role="status" aria-label="Service status">
<div class="topbar__inner">
<svg class="topbar__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M8.3 3.1a2 2 0 0 1 3.4 0l6 10A2 2 0 0 1 16 16H4a2 2 0 0 1-1.7-3l6-9.9ZM10 7a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
</svg>
<p class="topbar__text">
Degraded performance in eu-west-1. Writes may be delayed.
</p>
<a class="topbar__link" href="https://status.example.com">Status page</a>
</div>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | Content rendered inside the component. |
ctaLabel | string | - | Call-to-action button text. |
href | string | - | Destination the card links to. |
className | string | - | Additional classes merged onto the root element. |
Render it first in the DOM, above the header, as a real block in the flow - never position: fixed. At 200% zoom the viewport is a few hundred CSS pixels tall and a fixed bar eats a third of it; in flow, the page simply starts lower. Use <section aria-label>, not <header>, so you don't add a second banner landmark. Reach for role="alert" only if the bar can appear after load in response to something; on a page that ships with it, the assertive region has nothing to announce anyway.