Similar to a Snackbar, the Inline Snackbar shows a brief status message for a short duration.
They differ from a Snackbar in that they appear inline on the page, close to an element that triggers it, while a normal Snackbar always appears at the bottom of the screen.
A common pattern is an Inline Snackbar appearing close to a Button component, reporting the status of a process that took place as a result of the user clicking the button.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Icon |
Icon that represents the type of status (neutral or success). |
No |
|
2. Content |
A brief status message. |
No |
|
3. Container |
Container for the icon and content. |
No |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| type Variant | neutral | success | neutral |
| ✏️ content Text | string | Snackbar message |
Component dependencies
This component is internally dependent on the following components:
Related components
Help and support