Homecomponentsfeedback

Toast

Show a global and temporary feedback in response to a user action.

Use Toast to display a global and temporary message with optional icons and actions.

The Toast is limited in width so that the text wraps after certain size.

Set the showIcon property to show an icon corresponding to the given tone.

Use the action property to add an action that can be performed. Generally, this is to provide an "Undo" action.

show

Required

Used to show the toast. Use together with onHide.

true

false

onHide

Required

Called when the toast is closed.

() => void

tone

Required

The tonality of the message.

success

warning

informational

critical

children

Required

The content of the toast.

ReactNode

showIcon

Used to show appropriate icon.

true

false

action

An optional action.

{ label: string; onClick: () => void; }

data

An object with the data keys and values.

DataAttributeMap