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
colorScheme
string
containerStyle
containerStyle
Optional style overrides for the container wrapping the toast component.
StyleProps
description
description
The description of the toast
ReactNode
duration
duration
The delay before the toast hides (in milliseconds)
If set to null
, toast will never dismiss.
number | null
5000 ( = 5000ms )
icon
icon
A custom icon that will be displayed by the toast.
ReactNode
id
id
The id
of the toast.
Mostly used when you need to prevent duplicate.
By default, we generate a unique id
for each toast
ToastId
isClosable
isClosable
If true
, toast will show a close button
boolean
onCloseComplete
onCloseComplete
Callback function to run side effects after the toast has closed.
(() => void)
position
position
The placement of the toast
ToastPosition
"bottom"
render
render
Render a component toast component.
Any component passed will receive 2 props: id
and onClose
.
((props: RenderProps) => ReactNode)
size
size
Sizes for useToast
are not implemented in the default theme. You can extend the theme to implement them.
string
status
status
The status of the toast.
"info" | "warning" | "success" | "error" | "loading"
title
title
The title of the toast
ReactNode
variant
variant
Variants for useToast
are not implemented in the default theme. You can extend the theme to implement them.
string
Props#
colorScheme
colorScheme
Color Schemes for useToast
are not implemented in the default theme. You can extend the theme to implement them.
string
containerStyle
containerStyle
Optional style overrides for the container wrapping the toast component.
StyleProps
description
description
The description of the toast
ReactNode
duration
duration
The delay before the toast hides (in milliseconds)
If set to null
, toast will never dismiss.
number | null
5000 ( = 5000ms )
icon
icon
A custom icon that will be displayed by the toast.
ReactNode
id
id
The id
of the toast.
Mostly used when you need to prevent duplicate.
By default, we generate a unique id
for each toast
ToastId
isClosable
isClosable
If true
, toast will show a close button
boolean
onCloseComplete
onCloseComplete
Callback function to run side effects after the toast has closed.
(() => void)
position
position
The placement of the toast
ToastPosition
"bottom"
render
render
Render a component toast component.
Any component passed will receive 2 props: id
and onClose
.
((props: RenderProps) => ReactNode)
size
size
Sizes for useToast
are not implemented in the default theme. You can extend the theme to implement them.
string
status
status
The status of the toast.
"info" | "warning" | "success" | "error" | "loading"
title
title
The title of the toast
ReactNode
variant
variant
Variants for useToast
are not implemented in the default theme. You can extend the theme to implement them.
string