Desktop components

Notifications

A notification gives people timely, high-value information they can understand at a glance.

When to use it

Use a notification for events that happen while attention is elsewhere, like a finished export or a new message. Avoid using it for errors in the current task. Those belong in a dialog or inline.

Preview

Elit Dapibus Ligula Sit

now

Maecenas faucibus mollis interdum. Morbi leo risus.

Export finished

2m ago

Report Q3.pdf is ready in your Downloads folder.

Anatomy

The banner is 344px wide with a 20px radius, and its height follows the content: 56px with one body line, 72px with two, and 77px with an attachment. The surface is rgba(245, 245, 245, 0.67) over a 20px blur with 180% saturation. The edge is glass: a dark 0.5px hairline outside the shape (slightly heavier on the sides) and a bright rim along the top and bottom only, with no rim on the sides. The shadow is the shared overlay shadow, 0 8px 48px at 25%.

Padding is 12px vertical and 14px on each side. The 32px icon is vertically centered, with a 12px gap to the text column. The title is 13px bold at rgba(0, 0, 0, 0.85) with a 16px line height. Body copy is 13px regular at the same color, clamped to two lines. The timestamp is 11px in #BFBFBF, aligned with the title at the trailing edge.

Class	Role
`.p-notification`	The banner. Grid of icon, text column, and timestamp.
`.p-notification__icon`	32px icon slot. Put an `img` or any 32px tile inside.
`.p-notification__title`	13px bold, single line, truncates with an ellipsis.
`.p-notification__body`	13px regular, clamped to two lines.
`.p-notification__time`	11px timestamp, top right.
`.p-notification__attachment`	Optional 32px thumbnail at the trailing edge, under the timestamp.
`.p-notification-group`	Wraps a banner to show the next card in its group peeking below.
`.p-notification-center`	Optional fixed top-right stack (16px inset, 16px gap) for showing live banners.

Attachments

Add an img with .p-notification__attachment to show a 32×32 thumbnail, such as a photo or document preview. It sits 14px from the trailing edge and 12px from the bottom, with a 6px continuous corner, under the timestamp. The body gives up the trailing column and the banner grows to 77px.

Shared Album

now

Kristina added 12 photos.

Grouped notifications

When several notifications from one app arrive together, macOS shows the newest and lets the next card peek out below it. Wrap the banner in .p-notification-group to draw that card: it is inset 16px on each side, uses the same material, radius, and edge, and shows 8px below the front banner. It is presentation only; expanding the group is up to your app.

Home

now

Outdoor Light was turned off.

Code

<div class="p-notification" role="status">
  <span class="p-notification__icon">
    <img src="app-icon.png" alt="" />
  </span>
  <p class="p-notification__title">Export finished</p>
  <span class="p-notification__time">now</span>
  <p class="p-notification__body">
    Report Q3.pdf is ready in your Downloads folder.
  </p>
</div>

Showing and dismissing banners is left to your app. For a floating stack, wrap banners in .p-notification-center and add or remove them from it. Give transient banners role="status" so screen readers announce them without interrupting.

Dark mode

The surface switches to rgba(58, 58, 62, 0.82). The title and body copy both become #F5F5F5, and the timestamp rgba(255, 255, 255, 0.25). The hairline darkens, the top and bottom rims soften to 20% and 12% white, and the overlay shadow deepens to 45%. Both .p-dark-mode and .p-auto-dark-mode are supported.

Accessibility

With prefers-reduced-transparency the surface becomes opaque #F0F0F0 (dark: #3A3A3E) and the blur is removed.
Browsers without backdrop-filter get the same opaque fallback.
With prefers-contrast: more the edge becomes solid 1px lines, and forced-colors mode draws a system-colored border.
Give an attachment alt text (or role="img" and an aria-label) when it carries meaning. Leave alt="" when it only repeats the body.
Title contrast is 12.6:1 in light mode and 14.9:1 in dark mode. The timestamp is decorative and stays low contrast, so repeat critical timing in the body if it matters.
Body copy clamps at two lines. Put the essential fact in the first line.