An inline notification gives feedback right where the user is working: next to a form, a quantity field or a delivery estimate. It stays in the page until the user acts or the state changes. It never disappears by itself.
Tokens, sizes, measurements, states and requirements. Values come from the live token package and from Inline notification.
Resolved from the live token package.
| Status · emphasis | Part | Token | Value |
|---|
| Property | Large | Small |
|---|---|---|
| Height | 48px | 32px |
| Padding | 12px | 4px |
| Icon | 24px | 20px |
| Left edge | 2px | 2px |
| Outline (Strong) | 1px, border-{status}-weaker, inside the height | Same |
| Gap icon to text | 8px | 8px |
| Title | label-sm 14px, 0.56px, bold, uppercase | Same |
| Text | body-sm 14/20, 0.36px | Same |
| Actionable | Indent 32px; buttons 16px below the text, 32px high; link 8px below the buttons | Not defined |
| Shadow | var(--shadow-elevation-b-20) | Same |
An inline notification is the same at every breakpoint.
The padding of a Large and a Small notification. The shaded area is the padding; the 2px status edge sits outside it. The numbers are read from the component.
| Attribute | Large | Small |
|---|---|---|
| Padding | 12px | 4px (the header has 2px more on the left) |
| Icon | 24px | 20px, 2px down |
| Gap icon to text | 8px | 8px |
| Left edge | 2px | 2px |
| Space above buttons | 16px | Not defined |
| Space above links | 16px (8px under buttons) | Not defined |
The same distances as spacing tokens.
| Part | Value |
|---|---|
| Padding, Large | space-12 |
| Padding, Small | space-4 |
| Icon to text | space-8 |
| Left edge | space-2 |
| Actions indent | space-32 |
| Above the actions | space-16 |
| Between buttons | space-8 |
| Between links | space-8 row, space-16 column |
| Part | Token | Value |
|---|---|---|
| Inline notification | shadow-elevation-b-20 | Every size and emphasis. |
Every status in both emphases. Combinations Figma does not define are marked. An inline notification has no hover or focus state of its own; its × and links do.
| Status | Strong | Weak |
|---|
| Element | Token | Value |
|---|---|---|
| Title (optional) | label-sm | 14/14, 0.56px, bold, uppercase |
| Text | body-sm | 14/20, 0.36px |
| Inline link | body-sm (Small) | 14/20 |
| Buttons | label-md / label-sm | 14/14, 0.42px (mobile), 0.56px (desktop) |
The type is the same at every breakpoint.
| Element | Class | Notes |
|---|---|---|
| Notification | inline-notification inline-notification--{status} inline-notification--{emphasis} | Status: info, success, warning, error. Emphasis: strong, weak. Add --small for Small. |
| Frame | __base, __left-border, __container, __inner | Edge, outline and padding. |
| Header | __header, __icon, __text, __title | The icon is a material-symbols-outlined span. |
| Actions | __actions with __btns or __links | Large only. Buttons or inline links. |
| Close | icon-btn icon-btn--close | Optional. |
Large: Strong and Weak for all four statuses, Default or Actionable. Small: Strong for all four, Weak for Informational and Warning only, Default only.
The width of the container.
| Property | Token | Value |
|---|---|---|
Close: opacity, height, margin and padding | --n-close-duration | Default duration-fast-3 (150ms) |
| Easing | --n-close-ease | Default ease-accelerate-generic |
| Height collapse | data-n-close="fade" on an ancestor turns it off | On by default |
Reduced motion: hidden at once. Compare values in the live Motion section on Examples & Guidelines.
| Input | Result |
|---|---|
| Click × | Hides the notification. |
| Persistence | It stays until the user acts, the state changes or it is closed. It never auto-hides. |
| Tab | The ×, buttons and link take focus with a visible ring. |
| Inline link | Underlined when enabled; on hover the underline goes and the color changes (eco-inline-link, Small). |
| Topic | Requirement |
|---|---|
| Announcement | Put the notification in a region with aria-live="polite" (role="alert" for errors that block progress) so it is announced when it appears (WCAG 4.1.3). |
| Status | The icon and the text carry the status, not the color alone (WCAG 1.4.1). |
| Focus | The ×, buttons and links have a 2px ring, border-focus, on keyboard use (WCAG 2.4.7). |
| Reduced motion | Hidden without a transition under prefers-reduced-motion: reduce. |