Snackbar
Snackbars provide brief messages about app processes at the bottom of the screen. They appear temporarily, towards the bottom of the screen, and shouldn't interrupt the user experience.
<x-mbc::snackbar message="This is a basic snackbar message" />
Note: In production, snackbars are programmatically opened using JavaScript. The examples on this
page are displayed for demonstration purposes. Always use the message
attribute to pass snackbar content.
Basic Snackbar
Use the message attribute to display brief messages at the bottom of the screen. Snackbars
communicate simple notifications about app processes.
<x-mbc::snackbar message="Message sent successfully" />
<x-mbc::snackbar message="Connection lost. Retrying..." />
<x-mbc::snackbar message="Photo saved to your gallery" />Best Practice: Keep snackbar messages brief and informative. They should communicate simple, single-line messages about operations or states.
Dynamic Messages
The message attribute accepts dynamic content from variables, making it easy to pass messages from
controllers, session data, or computed values.
<x-mbc::snackbar message="File uploaded successfully" />
<x-mbc::snackbar message="Changes saved" />
<x-mbc::snackbar message="Email deleted" />
Tip: Use the message attribute when passing dynamic content from variables:
message="File uploaded successfully"
With Action Button
Snackbars can include an optional action button using the @slot('action') slot. Actions
allow users to respond to the snackbar message, such as undoing an operation or viewing details.
<x-mbc::snackbar message="Item deleted">
</x-mbc::snackbar>
<x-mbc::snackbar message="Photo archived">
</x-mbc::snackbar>
<x-mbc::snackbar message="Connection timeout">
</x-mbc::snackbar>Best Practice: Action buttons should use a single word when possible (Undo, Retry, View). Keep actions simple and directly related to the snackbar message.
Snackbar Variants
Snackbars support different layout variants: default, leading, and stacked. These variants control how the message and action button are positioned.
<!-- Default Variant -->
<x-mbc::snackbar variant="default" message="Default layout">
</x-mbc::snackbar>
<!-- Leading Variant -->
<x-mbc::snackbar variant="leading" message="Leading layout (action on left)">
</x-mbc::snackbar>
<!-- Stacked Variant -->
<x-mbc::snackbar variant="stacked" message="Stacked layout (action below message)">
</x-mbc::snackbar>
Use Case: Use stacked for longer messages with actions, leading for left-aligned actions, and default for standard right-aligned layouts.
Opening Snackbar
In production, snackbars are opened programmatically using JavaScript. Each snackbar element automatically has an MDCSnackbar instance attached to it.
<x-mbc::snackbar id="snackbar-opening" message="Success! Operation completed." />
<x-mbc::button
label="Open Snackbar"
variant="raised"
onclick="document.getElementById('snackbar-opening').MDCSnackbar.open()" />Documentation: For complete API documentation, see the Material Components Web Snackbar documentation.
Properties
mbc::snackbar
| Name | Type | Default | Description |
|---|---|---|---|
class
|
string
|
optional
|
Additional CSS classes |
id
|
string
|
optional
|
Element ID for programmatic control |
message
|
string
|
null
|
Message text to display (can also use slot content) |
variant
|
string
|
default
|
Snackbar variant: default, leading, or stacked |