Color Schemes for useToast are not implemented in the default theme. You can extend the theme to implement them.
Toast
The toast component is used to give feedback to users after an action has taken place.
Props#
colorScheme
colorSchemeDescription
Type
stringcontainerStyle
containerStyleDescription
Optional style overrides for the container wrapping the toast component.
Type
CSSPropertiesdescription
descriptionDescription
The description of the toast
Type
ReactNodeduration
durationDescription
The delay before the toast hides (in milliseconds)
If set to null, toast will never dismiss.
Type
number | nullDefault
5000 ( = 5000ms )icon
iconDescription
A custom icon that will be displayed by the toast.
Type
ReactNodeid
idDescription
The id of the toast.
Mostly used when you need to prevent duplicate.
By default, we generate a unique id for each toast
Type
ToastIdisClosable
isClosableDescription
If true, toast will show a close button
Type
booleanonCloseComplete
onCloseCompleteDescription
Callback function to run side effects after the toast has closed.
Type
(() => void)position
positionDescription
The placement of the toast
Type
ToastPositionDefault
"bottom"render
renderDescription
Render a component toast component.
Any component passed will receive 2 props: id and onClose.
Type
((props: RenderProps) => ReactNode)size
sizeDescription
Sizes for useToast are not implemented in the default theme. You can extend the theme to implement them.
Type
stringstatus
statusDescription
The status of the toast.
Type
"info" | "warning" | "success" | "error" | "loading"title
titleDescription
The title of the toast
Type
ReactNodevariant
variantDescription
Variants for useToast are not implemented in the default theme. You can extend the theme to implement them.
Type
stringProps#
colorScheme
colorSchemeDescription
Color Schemes for useToast are not implemented in the default theme. You can extend the theme to implement them.
Type
stringcontainerStyle
containerStyleDescription
Optional style overrides for the container wrapping the toast component.
Type
CSSPropertiesdescription
descriptionDescription
The description of the toast
Type
ReactNodeduration
durationDescription
The delay before the toast hides (in milliseconds)
If set to null, toast will never dismiss.
Type
number | nullDefault
5000 ( = 5000ms )icon
iconDescription
A custom icon that will be displayed by the toast.
Type
ReactNodeid
idDescription
The id of the toast.
Mostly used when you need to prevent duplicate.
By default, we generate a unique id for each toast
Type
ToastIdisClosable
isClosableDescription
If true, toast will show a close button
Type
booleanonCloseComplete
onCloseCompleteDescription
Callback function to run side effects after the toast has closed.
Type
(() => void)position
positionDescription
The placement of the toast
Type
ToastPositionDefault
"bottom"render
renderDescription
Render a component toast component.
Any component passed will receive 2 props: id and onClose.
Type
((props: RenderProps) => ReactNode)size
sizeDescription
Sizes for useToast are not implemented in the default theme. You can extend the theme to implement them.
Type
stringstatus
statusDescription
The status of the toast.
Type
"info" | "warning" | "success" | "error" | "loading"title
titleDescription
The title of the toast
Type
ReactNodevariant
variantDescription
Variants for useToast are not implemented in the default theme. You can extend the theme to implement them.
Type
string