Design systemNotification
A solid coloured bar with a one-line message, shown in place on the page. It stays until it is closed.
import { Notification } from "@/ui";Notification is the static, in-page version of the Toast bar. It does not float, animate or close on its own; you place it in the layout and decide when it goes away.
No screen uses Notification today. It is exported from @/ui and works, but check the contrast notes below before you adopt it.
Variants
<Notification variant="success" message="Landing page published to petavue.com/q3-webinar." />
<Notification variant="info" message="Pipeline data refreshes every 6 hours." />
<Notification variant="warning" message="2 campaigns are missing UTM parameters." />
<Notification variant="error" message="HubSpot sync failed. Pipeline numbers are from yesterday." />| Variant | Background | Use for |
|---|---|---|
success (default) | --color-green #08BD50 | Confirming that something finished. |
info | --color-primary-500 #3661ED | A neutral fact about the page. |
warning | --color-orange #FBBF24 | Something that needs attention but is not broken. |
error | --color-red #F93D3D | Something failed and the data on the page is affected. |
The text is always white, 14px medium on a 22px line. The bar has 8px 16px padding, a 4px radius (--radius-sm) and a minimum width of 280px. It grows to fill its container.
The CSS gives each variant a 3px left border, but in the same colour as the background, so it is not visible.
White text only meets the 4.5:1 contrast minimum on info (about 5.1:1). It is about 3.7:1 on error, 2.5:1 on success and 1.7:1 on warning, which is hard to read. If you need a warning that people must read, put the detail in the page body as well.
Dismissible
Pass onClose to show a close button. Without it there is no way to dismiss the bar. Close the one below, then bring it back.
const [open, setOpen] = useState(true);
{open && (
<Notification
variant="error"
message="HubSpot sync failed. Pipeline numbers are from yesterday."
onClose={() => setOpen(false)}
/>
)}The component does not hide itself. onClose is only a callback, so you must remove it from the tree as above.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
variant | "success" | "info" | "warning" | "error" | "success" | |
message | ReactNode | "Notification" | The text. children is ignored. |
onClose | () => void | Shows the close button when set. | |
className | string | For layout only. |
Any other prop (id, data-*, aria-*) is passed to the outer <div>.
Accessibility
- The bar always has
role="alert", so a screen reader reads it out immediately when it appears, whatever the variant. That suitserror, but it interrupts people forsuccessandinfo. For those, passrole="status"to override it. - When the bar is on the page from the first render,
role="alert"is usually not announced. Rely on it only for bars you add after something happens. - The close button is a native
<button>witharia-label="Close notification"and a 1px white focus outline.
Do and don't
- Do write the message as what happened and what it means: "HubSpot sync failed. Pipeline numbers are from yesterday."
- Do keep it to one sentence or two short ones. There is no title or action slot.
- Don't use it for confirmations that only matter for a moment, such as "Saved". Use a toast.
- Don't use
warningfor anything people must read. The contrast is too low. - Don't stack more than one or two on a page. If several things are wrong, list them in the page body.