Components

Toast

The toast is a non-disruptive message that provides feedback after an action has taken place. The toast will close itself when the close button is clicked, or after a timeout.

For critical or persistent error messages, or to communicate a state that affects a system, feature or page, use the alert component.

For critical messages requiring immediate action, use an alert dialog.

Import

import { useToast } from '@outfitio/outkit';

Usage

Success

Warning

Error

Position

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

Accessibility

Avoid using a toast for critical information that requires immediate action.

Best Practice

Toast messages can be used for:

Short messages that confirm an action, such as a success messages
Non-critical errors that are relevant in the moment an be explained in a couple of words

Toasts should not be used for:

Critical or persistent error messages. Use the alert component instead.

Props

Name	Type	Default	Description
`title`	`string`		The title of the toast.
`isClosable`	`boolean`	`false`	If `true` adds a close button to the toast.
`onClose`	`function`		Callback function to close the toast.
`description`	`string`		The description of the toast.
`status`	`success`, `error`, `warning`, `info`		The status of the toast.
`duration`	`number`	`5000ms`	Duration before dismiss in milliseconds, or `null` to never dismiss.
`position`	`top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`	`bottom`	Position the toast will popup out from.
`render`	`(props: {onClose:() => void, id: string}) => React.ReactNode`		The description of the toast.