Notification

InstallationCopy Anchor Link

UsageCopy Anchor Link

import { Notification } from "@/components/ui/notification";

export function MaintenanceNotice() {
  return (
    <Notification
      variant="warning"
      title="Notice:"
      dismissible
      dismissLabel="Dismiss"
      action={<a href="/status">Details</a>}
    >
      The portal will be down for maintenance on Friday.
    </Notification>
  );
}

Use a Notification at the top of a page or section for something that concerns all of it: planned maintenance, a new service, an account problem. It stays until the person dismisses it or the cause is gone. For a message tied to one form or card use an Inline Alert; for something that just happened use a Toast. Mount a Notification when it applies, not before: a live region is announced when its content appears. Start it with a short bold title ("Important:").

AnatomyCopy Anchor Link

• Banner (role="status", or role="alert" for critical): full width, padding 8 by 24px, radius-xs, a 2px bottom border in the kind's colour.
• Icon (optional), title (bold lead-in) and the message.
• Action (a link or a small Button) and close button, on the end side.

ExamplesCopy Anchor Link

KindsCopy Anchor Link

variant is neutral, info, success, warning or critical. Each is a 50 tint with text and an icon in the kind's colour. Dismiss one to see it go.

Without an icon and dismissedCopy Anchor Link

hideIcon removes the status icon: the colour and the bold title still carry the kind. After the person dismisses a notification onDismiss runs and nothing is rendered in its place, so keep the state in the page if you need to bring it back.

RTLCopy Anchor Link

The icon is on the right, the action and close button on the left, and the text starts on the right. Nothing is flipped by hand.

AccessibilityCopy Anchor Link

• A live region: critical has role="alert" and interrupts; the others are role="status" and wait for a pause. Focus does not move.
• The kind is shown by the icon and the lead-in as well as colour. Text is 4.5:1 and icons 3:1 or better on the tint, light and dark.
• The close button has an accessible name (dismissLabel) and a 2px focus outline. Links in the message keep their underline.

API ReferenceCopy Anchor Link

Deviations from DGACopy Anchor Link

• Figma colours the icon icon-oncolor (white) on a 50 tint: 1.0 to 1.1:1, so it cannot be seen. The icon uses the kind's icon colour.
• The CSS draws success in the brand green where Figma uses the success tokens; Figma wins. Every kind is announced as a live region.

ContrastCopy Anchor Link