Examples
Specimens
Programmatic usage
<button
class="button"
type="button"
data-demo-toast='{"title":"Saved","body":"Changes synced.","variant":"success"}'
>
Show success toast
</button>
</div>
</div>
Variants
<div class="cluster">
<button
class="button is-outlined"
type="button"
data-demo-toast='{"body":"Heads up.","variant":"info"}'
>
Info
</button>
<button
class="button is-outlined"
type="button"
data-demo-toast='{"body":"Saved.","variant":"success"}'
>
Success
</button>
<button
class="button is-outlined"
type="button"
data-demo-toast='{"body":"Check this.","variant":"warning"}'
>
Warning
</button>
<button
class="button is-outlined"
type="button"
data-demo-toast='{"title":"Failed","body":"Try again.","variant":"danger"}'
>
Danger
</button>
</div>
</div>
</div>
With an icon
<button class="button" type="button" data-demo-toast-clone="demo-toast-icon">
Show toast with icon
</button>
</div>
</div>
Positions
<div class="cluster">
<button
class="button is-outlined"
type="button"
data-demo-toast='{"body":"top-end","position":"top-end"}'
>
top-end
</button>
<button
class="button is-outlined"
type="button"
data-demo-toast='{"body":"top-start","position":"top-start"}'
>
top-start
</button>
<button
class="button is-outlined"
type="button"
data-demo-toast='{"body":"top-center","position":"top-center"}'
>
top-center
</button>
<button
class="button is-outlined"
type="button"
data-demo-toast='{"body":"bottom-end","position":"bottom-end"}'
>
bottom-end
</button>
<button
class="button is-outlined"
type="button"
data-demo-toast='{"body":"bottom-start","position":"bottom-start"}'
>
bottom-start
</button>
<button
class="button is-outlined"
type="button"
data-demo-toast='{"body":"bottom-center","position":"bottom-center"}'
>
bottom-center
</button>
</div>
</div>
</div>
Duration
<div class="cluster">
<button
class="button is-outlined"
type="button"
data-demo-toast='{"body":"5 second default","variant":"info"}'
>
Default 5s
</button>
<button
class="button is-outlined"
type="button"
data-demo-toast='{"body":"10 second read","variant":"info","duration":10000}'
>
10s custom
</button>
<button
class="button is-outlined"
type="button"
data-demo-toast='{"body":"Manual dismiss only","variant":"info","duration":0}'
>
Sticky (0)
</button>
</div>
</div>
</div>
Server-sent toasts
<button class="button" type="button" data-demo-toast-clone="demo-toast-server-sent">
Simulate server insert
</button>
</div>
</div>
Source comments
Toast -- ephemeral floating notification.
Authored container:
<div class="toast-container is-top-end"
role="region" aria-label="Notifications"
aria-live="polite"></div>
Authored toast (cloned from <template> by toast.js):
<output class="toast is-success" role="status">
<!-- optional first-child <svg aria-hidden="true">...</svg> -->
<div class="toast-content">
<div class="toast-title">Saved</div>
<p>Changes synced.</p>
</div>
<button class="dismiss" type="button" aria-label="Dismiss">×</button>
<div class="toast-progress"></div>
</output>
Behavior contract: toast.js owns insertion, auto-dismiss timing,
timer pause-on-hover/focus (paired with the CSS progress-pause
rule below), and exit via .is-leaving + transitionend cleanup.
TODO(toast,brio-toast-region): convenience custom element bundling
the .toast-container + the brio-toast <template> into a single
tag for the common-case setup.
TODO(toast,swipe-dismiss): swipe-to-dismiss touch gesture, opt-in
via a data attribute on the container.
Reference
Source: src/css/toast.css
Applies to
.toast
Classes
| Class | Kind | Description |
|---|---|---|
.is-leaving | variant | Exit state applied by toast.js before removal |
.is-info | variant | Info color variant for primary-tone toasts |
.is-success | variant | Success color variant |
.is-warning | variant | Warning color variant |
.is-danger | variant | Danger color variant |
Slots
| Slot | Description |
|---|---|
> svg:first-child | Leading icon -- first-child <svg>. Direct child only so a deeper SVG inside body content doesn't pick up slot styling. |
.toast-content | Content region with title and body text |
.toast-title | Title text inside the content region |
.toast-progress | The progress bar shown when a timer is counting down |
Tokens
| Token | Default | Description |
|---|---|---|
--toast-bg | var(--color-surface-float) | Background color for the toast |
--toast-color | var(--color-text) | Text color inside the toast |
--toast-border-color | var(--color-border) | Border color for the toast |
--toast-border-width | var(--border-width-default) | Border width for the toast |
--toast-accent | var(--color-border-strong) | Accent color for the icon and progress bar |
--toast-min-width | 16rem | Minimum width of the toast |
Related: Toast Container
The fixed region that collects toast notifications on screen. It should be added once in the page as the live region.
Source: src/css/toast.css
Applies to
.toast-container
Classes
| Class | Kind | Description |
|---|---|---|
.is-top-end | variant | Top-end corner position (default) |
.is-top-start | variant | Top-start corner position |
.is-top-center | variant | Top-center position |
.is-bottom-end | variant | Bottom-end corner position |
.is-bottom-start | variant | Bottom-start corner position |
.is-bottom-center | variant | Bottom-center position |
Tokens
| Token | Default | Description |
|---|---|---|
--toast-max-width | 24rem | Maximum width of the toast container |
--toast-enter-offset-y | -0.5rem | Entrance and exit direction for toasts |