Toast
Lightweight, push-style notifications built to mirror Bootstrap’s toast. Compose a
Toast from a ToastHeader and ToastBody, control
visibility, and let it auto-dismiss.
Import
import {
Toast,
ToastHeader,
ToastBody,
ToastContainer,
} from '@metatoy/bootstrap-styled';Basic
A toast is a shell you fill with a header and body. ToastHeader renders a built-in
dismiss button by default (closeButton), and ToastBody holds the message. Uncontrolled
toasts default to defaultShow, so they render immediately.
Trigger & autohide
Drive visibility with the controlled show prop and onClose. Add autohide with a
delay (ms) to have the toast dismiss itself after it appears. Click Show toast —
it hides again after four seconds:
Positioning
To stack toasts in a fixed corner of the viewport, wrap them in a ToastContainer and
set position to one of the nine placements (top-start, top-center, top-end,
middle-*, bottom-*):
<ToastContainer position="top-end">
<Toast defaultShow>
<ToastBody>First</ToastBody>
</Toast>
<Toast defaultShow>
<ToastBody>Second</ToastBody>
</Toast>
</ToastContainer>Props
Toast
| Prop | Type | Default | Description |
|---|---|---|---|
| show | boolean | — | Controlled visibility. Omit to use `defaultShow` (uncontrolled). |
| defaultShow | boolean | — | Uncontrolled initial visibility. Defaults to `true` so the toast renders statically. |
| onClose | () => void | — | Fired when the toast requests dismissal (autohide elapsed or close button). |
| autohide | boolean | — | Bootstrap `autohide` — auto-dismiss after `delay` ms while shown. |
| delay | number | — | Auto-dismiss delay in ms (Bootstrap default 5000). |
| as | React.ElementType | — | — |
ToastHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| closeButton | boolean | — | Render the built-in dismiss button (wired to the parent Toast). Default true. |
| as | React.ElementType | — | — |
ToastContainer
| Prop | Type | Default | Description |
|---|---|---|---|
| position | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "middle-start" | "middle-center" | "middle-end" | "bottom-center" | — | Fixed-position placement of the toast stack (Bootstrap position utilities). |
| as | React.ElementType | — | — |
ToastBody is a styled <div> and accepts all native attributes. All three subcomponents
forward native props and an as prop.
Theming
Toast reads the full --bs-toast-* token surface: --bs-toast-bg, --bs-toast-color,
--bs-toast-border-color, --bs-toast-border-radius, --bs-toast-max-width,
--bs-toast-padding-x / -y, --bs-toast-box-shadow, --bs-toast-zindex, and
--bs-toast-font-size. The header adds --bs-toast-header-bg,
--bs-toast-header-color, and --bs-toast-header-border-color. Override any of these —
for a colored toast, set --bs-toast-bg and --bs-toast-color inline on the Toast:
<Toast defaultShow style={{ '--bs-toast-bg': '#0d6efd', '--bs-toast-color': '#fff' }}>
<ToastBody>Hello, world!</ToastBody>
</Toast>Under [data-bs-theme=dark] the token defaults shift automatically with the color mode.
Accessibility
A toast is an assertive live region. Give the outer Toast role="alert" with
aria-live="assertive" and aria-atomic="true" for time-sensitive messages, or
role="status" with aria-live="polite" for non-critical ones. The built-in header
dismiss button is a real focusable <button> with an accessible label. Because
autohide removes the toast on a timer, avoid it for content users must read or act on.