Migration
The framework no longer ships a banner component. This page stays up for existing links.
Remove .banner, its rich, vibrant and
square modifiers, and --md-comp-banners-* overrides
from former banner markup. The modifiers still work on other components
that document them. In a custom Sass build, also remove the banners partial.
Banners were a framework pattern related to legacy Material 2 banners. The current Material 3 inventory we reviewed has no banner entry. That absence does not show that Google deprecated them.
Choose the replacement
- For a persistent issue that doesn't block the user, put an alert next to the affected content.
- For temporary feedback after an action, use a snackbar.
- For a decision that must block progress, use a dialog.
For example, an offline alert can sit in normal document flow while the user keeps editing:
<div class="alert">
<span class="material-symbols" aria-hidden="true">cloud_off</span>
<p>You're offline. Edits are saved locally and will sync later.</p>
<div class="alert-actions">
<button class="button text" type="button">Retry sync</button>
</div>
</div>Connect the button to your application's retry action. An alert is CSS only and needs no initialization.
Accessibility and behavior
A static message needs no live region. To announce a change during use, create an empty
role="status" text node first, then update its text. Keep action
buttons outside the live region. Don't move focus only to announce a status.
Use named buttons for commands, not a navigation landmark. The
role="banner" landmark marks the page header, so don't put it on a message.
If users can dismiss the message, move focus somewhere logical when you remove
the focused control. Let text and actions wrap instead of setting fixed
heights. Check that narrow screens and enlarged text don't clip
controls.