Skip to content
bitboss-ui3.0.0-beta.64

BbToast

The toast() stack.

import { BbToast } from 'bitboss-ui';

On this page

Props

NameDescription
pt Type: (PtMap<BbToastPtPart, never> & { "title:destructive"?: PtValue | undefined; "title:warning"?: PtValue | undefined; "icon:destructive"?: PtValue | undefined; "icon:warning"?: PtValue | undefined; "text:destructive"?: PtValue | undefined; "text:warning"?: PtValue | undefined; "close:destructive"?: PtValue | undefined; "close:warning"?: PtValue | undefined; "icon:loading"?: PtValue | undefined; "text:loading"?: PtValue | undefined; "panel:loading"?: PtValue | undefined; "title:default"?: PtValue | undefined; "content:default"?: PtValue | undefined; "content:destructive"?: PtValue | undefined; "text:default"?: PtValue | undefined; "close:default"?: PtValue | undefined; "footer:default"?: PtValue | undefined; "footer:destructive"?: PtValue | undefined; "action:default"?: PtValue | undefined; "action:destructive"?: PtValue | undefined; "footer:loading"?: PtValue | undefined; "title:loading"?: PtValue | undefined; "content:loading"?: PtValue | undefined; "close:loading"?: PtValue | undefined; "action:loading"?: PtValue | undefined; "title:success"?: PtValue | undefined; "title:info"?: PtValue | undefined; "icon:default"?: PtValue | undefined; "icon:success"?: PtValue | undefined; "icon:info"?: PtValue | undefined; "panel:default"?: PtValue | undefined; "panel:destructive"?: PtValue | undefined; "panel:warning"?: PtValue | undefined; "panel:success"?: PtValue | undefined; "panel:info"?: PtValue | undefined; "content:warning"?: PtValue | undefined; "content:success"?: PtValue | undefined; "content:info"?: PtValue | undefined; "text:success"?: PtValue | undefined; "text:info"?: PtValue | undefined; "close:success"?: PtValue | undefined; "close:info"?: PtValue | undefined; "footer:warning"?: PtValue | undefined; "footer:success"?: PtValue | undefined; "footer:info"?: PtValue | undefined; "action:warning"?: PtValue | undefined; "action:success"?: PtValue | undefined; "action:info"?: PtValue | undefined; })

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

pt:<part> Type: PtValue

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: action, close, content, footer, icon, panel, root, text, title. States: default, destructive, info, loading, success, warning.

Not attributes on a tag: <BbHost /> takes no props. These parts are the keys of the build-time pt.BbToast map, which styles every toast the app shows: panel (the card), icon, content, title, text, footer (the actions row), action (each button) and close, plus a per-toast loading state (pt:panel:loading). A portal toast has no icon, title, text, footer or action.

See example

Renamed and removed

Names from v2 and from earlier 3.0 betas that no longer work, and what to write instead.

  • placementpositionfails silently

    The host is <BbHost /> now and takes no props: set the plugin's toastPosition (corner names: top-end → top-right, bottom → bottom-center, …)

  • optionshowClosehideClosefails silently

    A toast() option, polarity inverted: showClose: false → hideClose: true; showClose: true was the default, delete it.

  • optionthemevariantfails silently

    A toast() / useToast().toast() option, not a prop: toast({ variant: 'success' }) (plus an icon for the tone to show)

  • optiontimeoutdurationfails silently

    A toast() option: toast({ duration: 4000 }); the default fell from 6000 to 4000 ms.