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.
The buttons in In action show the statuses appearing in context. Figma: Inline notification.
Choose size, status, emphasis and layout and the notification and its code update. The × works; Show again brings it back.
The animation when the × is clicked is set in Motion.
The markup has no motion. Closing animation is set in Motion.
Two real situations. The notification appears where the work is, replaces the previous one, and stays until the user fixes the problem or closes it.
Each button submits the form with a different result. The notification replaces the previous one and stays until it is closed.
Informational Weak with its own icon. The message follows the quantity.
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.
It is a task-generated notification. A brief confirmation belongs in a Toast, and a message for the whole page or system in a Banner. Not sure it is the right component? Start at the Notifications guide.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use an inline notification. Specifications holds the values: tokens, sizes, measurements, states and requirements. Code shows how to build one and the CSS behind it.
Use an inline notification for status that belongs to one place on the page and has to stay. Use it to:
An inline notification sits in the region of the work. A banner at the top of the page is for the whole site, and is too far away from a form.
Weak is the default, for feedback the user can already see, such as helper information. Strong is for a problem the user must fix. See Choosing the emphasis.
An inline notification never disappears by itself. For a brief confirmation that leaves on its own, use a Toast.
| The message… | Use |
|---|---|
| belongs to one section, form or content block and must stay | Inline (this page) |
| is a short confirmation of an action | Toast |
| concerns the whole page or system | Banner |
| needs a decision before the user can go on | Modal |
aria-live when it appears after an action.label-sm, uppercase.body-sm, 14/20.Two sizes, two emphasis levels and two layouts. Pick the size by how much room the message has, and the emphasis by how loud it should be: Weak for feedback the user can already see, Strong for a problem the user must fix. See Choosing the emphasis.
48px high with a 24px icon. The default for messages next to forms and content blocks.
32px high with a 20px icon, for tight spaces such as next to a field. No Actionable layout. Weak exists only for Informational and Warning.
Large only. Buttons under the text, indented 32px so they line up with it. Use it when the user can fix the problem from here.
The action area holds either buttons or inline links, not both. Links suit lighter next steps.
Informational Weak is white with a blue edge. Like any Informational notification it may carry an icon the author chooses instead of the default info: a Google Material Symbols name, shown as Outlined (Fill 0, Weight 300, Grade 0). Success, Warning and Error always keep their own filled icon.
Large is 48px high with a 24px icon and 12px padding. Small is 32px high with a 20px icon and 4px padding. An inline notification is the same at every breakpoint. All values are under Sizes in Specifications.
The icon, the text and the × sit on one row, top-aligned. In the Actionable layout the buttons or links start 32px from the edge, under the text.
Next to the thing it is about: above or below a form, beside a quantity field or a delivery estimate. It is part of the page flow and moves the content around it.
An inline notification takes the width of its container.
Strong has a tinted background and a 1px outline; Weak is white. Both have a 2px status edge and the elevation b-20. Token names and values are under Design Tokens in Specifications.
The × hides the notification with a fade and a height collapse, so no gap is left.
It stays until the user acts, the state changes or it is closed. It never auto-hides.
Only the ×, the buttons and the links have states. They take focus with a visible ring, on keyboard use only. All states are under States in Specifications.
Closing is a fade and a collapse: accelerate easing, 150ms. Try other values under Motion above, and see Motion in Specifications.
All requirements are listed under Accessibility Requirements in Specifications.
Tab moves to the ×, the buttons and the links, each with a visible focus ring.
Put the notification in a region with aria-live="polite" (role="alert" for errors that block progress) so it is announced when it appears. The status is carried by the icon and the text, not by color alone.