Toast
A brief message that confirms what just happened.
In context
Projects
Imperative toast()
Your Profile
Static, as drawn by the provider.
Ask
Static, as drawn by the provider.
Ask
Static, as drawn by the provider.
Toast props
| Prop | Type | Required | Default |
|---|---|---|---|
open | boolean | undefined | No | — |
onOpenChange | ((open: boolean) => void) | undefined | No | — |
title | ReactNode | Yes | — |
description | ReactNode | No | — |
type | "info" | "success" | "warning" | "error" | undefined | No | info |
duration | number | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Accessibility
Radix toast: the viewport is a role="region" labelled with a hotkey (F8 moves focus to it), each toast a role="status" live region that pauses its timer on hover and focus. A visible close button is always rendered; swipe to dismiss works on touch.
data-rebar-* attributes
data-rebar-component="toast-viewport" on the provider's viewport; data-rebar-component="toast" with data-rebar-type on each toast; parts title, description, close.
Migrating to Ant Design
AntD's message and notification are imperative calls rather than a mounted, controlled component: a structural difference, not a prop rename.
appearance="classic"
toast(msg, { appearance: "classic" }) (and the success / error / info / loading shortcuts) draws the plain centred dark pill: text only, 204px max, one at a time, 2s. confirm({ appearance: "classic", closeOnMaskClick: false }) draws the compact alert with two split text buttons.