Toast

The toast is used to show alerts on top of an overlay. The toast will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feedback to users after an action has taken place.

Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time.

Import#

Usage#

Editable Example

Custom component#

Display a custom component instead of the default Toast UI.

Editable Example

Success#

Editable Example

Warning#

Editable Example

Error#

Editable Example

Position#

Using the position prop you can adjust where your toast will be popup from.

Editable Example

Props#

NameTypeDefaultDescription
titlestringThe title of the toast.
isClosablebooleanfalseIf true adds a close button to the toast.
onClosefunctionCallback function to close the toast.
descriptionstringThe description of the toast.
statussuccess, danger, warning, infoThe status of the toast.
durationnumber5000msDuration before dismiss in milliseconds, or null to never dismiss.
positiontop, top-left, top-right, bottom, bottom-left, bottom-rightbottomPosition the toast will popup out from.
render(props: {onClose:() => void, id: string}) => React.ReactNodeThe description of the toast.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2019 Segun Adebayo