Code

API

This component extends the native <div> API. That's why the className prop is not included in the table.

Props	Data Type	Required
variant	'default' | 'subtle';	❌
stacked	boolean	❌
autoClose	number | false	❌
limit	number	❌
customPosition	{ top?: number | 'auto'; bottom?: number | 'auto'; left?: number | 'auto'; right?: number | 'auto'; };	❌

variant

Determines the variant of the Toast.

stacked

Determines if the Toast should be stacking.

autoClose

Prop used to determine if/when the toast is autoclosed.

limit

To determine the max amount of toasts rendered at the same time.

customPosition

This prop is used to set the toast position, passing a value or automatically.

toastTrigger

This object is used to pass the props to the render the default toast, such as the icon, content, etc. It has various methods, depending on which variant you will use.

You can only use the four methods when using the default variant.

• default

• success

• warning

• danger

They all inherit the following 4 props:

Prop	Type	Required
icon	AvailableTelicon	❌
content	ReactNode	❌
position	'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';	❌
hideIcon	boolean	❌

toastSubtleTrigger

This object is used to pass the props to the render the subtle toast, such as the icon, content, etc.

You can only use these object when using the subtle variant.

Prop	Type	Required
icon	AvailableTelicon	❌
content	ReactNode	❌
position	'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';	❌

Example

Live Demo

Code Sandbox