yarn add @twilio-paste/toast - or - yarn add @twilio-paste/core
import {Toast, Toaster} from '@twilio-paste/core/toast';
const Component = () => {
const toaster = useToaster();
return <Toaster left={['space40', 'unset', 'unset']} {...toaster} />;
};
If you choose to handle state entirely yourself, you can use <Toaster /> on its own, but you are fully responsible for handling state, time-outs, and the dismiss functionality.
<Toaster
left={['space40', 'unset', 'unset']}
toasts={[{
id: '',
message: '',
variant: ''
dismissAfter: ''
}]}
pop={(id) =>{
// called when a toast is dismissed
}}
/>
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
TOAST
i18nDismissLabel
Label for the dismiss button in a dismissable toast
- Type
string- Default
Dismiss toast
i18nErrorLabel
Icon label text for the error variant
- Type
string- Default
(error)
i18nNeutralLabel
Icon label text for the neutral variant
- Type
string- Default
(information)
i18nSuccessLabel
Icon label text for the success variant
- Type
string- Default
(success)
i18nWarningLabel
Icon label text for the warning variant
- Type
string- Default
(warning)
onDismiss
callback when user clicks the dismiss button
- Type
() => void
setFocus
Use this to set focus within the toast when it is rendered
- Type
boolean- Default
'true'
variant
The style of toast you would like the user to see
- Type
any
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
pop RequiredRequired
Method used to pop a toast from the toast stack based on it's id
- Type
(id: string) => void
toasts RequiredRequired
Collection of toasts to show in the toaster
- Type
ToasterToast[]
left
Sets the left value of the ToastContainer to add breakpoints for small screens
- Type
any
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
left
Sets the left value of the ToastContainer to add breakpoints for small screens
- Type
any
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
pop RequiredRequired
Method used to pop a toast from the toast stack based on it's id
- Type
(id: string) => void
push RequiredRequired
Method used to push a toast to the toast stack
- Type
(toast: ToasterPush) => void
toasts RequiredRequired
Collection of toasts to show in the toaster
- Type
ToasterToast[]
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.