Snackbar
The snackbar component is used to give feedback after certain actions.
Props#
useSnackbar#
| Prop | Type | Default | Description |
|---|---|---|---|
| action | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | ||
| containerStyle | StyleProps | Optional style overrides for the container wrapping the toast component. | |
| description | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | The description of the toast | |
| duration | number | 5000 ( = 5000ms ) | The delay before the toast hides (in milliseconds)
If set to null, toast will never dismiss. |
| icon | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | A custom icon that will be displayed by the toast. | |
| id | ToastId | The id of the toast.
Mostly used when you need to prevent duplicate.
By default, we generate a unique id for each toast | |
| isClosable | boolean | false | If true, toast will show a close button |
| onCloseComplete | () => void | Callback function to run side effects after the toast has closed. | |
| position | ToastPosition | bottom | The placement of the toast |
| render | (props: RenderProps) => ReactNode | Render a component toast component.
Any component passed will receive 2 props: id and onClose. | |
| status | "info" | "warning" | "success" | "error" | "loading" | The status of the toast. | |
| title | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | The title of the toast | |
| variant | string |
Was this helpful?