Toasts are used to show alerts on top of an overlay. The toast will close itself
when the close button is clicked, or after a timeout—the default is 5 seconds.
Toasts are usually used to give feedback to users after an action has taken
place.
React
We can use the Toast component with the custom hook useToast.
import { useToast } from '@hoverinc/design-system-react-web';
Position
By default the toast will be shown on the top right of the screen, but we can
change it by passing the position prop.
live
() => {
const toast = useToast();
return (
<Stack direction="column" spacing="400">
<Stack direction="row" spacing="800">
<Button
onClick={() =>
toast({
description: 'top-left',
position: 'top-left',
})
}
>
↖️ Top Left
</Button>
<Button
onClick={() =>
toast({
description: 'top-center',
position: 'top-center',
})
}
>
↑ Top Center
</Button>
<Button
onClick={() =>
toast({
description: 'top-right',
position: 'top-right',
})
}
>
↗️ Top Right
</Button>
</Stack>
<Divider />
<Stack direction="row" spacing="400">
<Button
onClick={() =>
toast({
description: 'bottom-left',
position: 'bottom-left',
})
}
>
↙️ Bottom Left
</Button>
<Button
onClick={() =>
toast({
description: 'bottom-center',
position: 'bottom-center',
})
}
>
↓ Bottom Center
</Button>
<Button
onClick={() =>
toast({
description: 'bottom-right',
position: 'bottom-right',
})
}
>
↘️ Bottom Right
</Button>
</Stack>
</Stack>
);
};
Action
A toast can have a custom action button.
live
() => {
const toast = useToast();
return (
<Stack direction="row" spacing="4">
<Button
onClick={() =>
toast({
description: 'Click to alert ->',
props: {
action: {
callback: () => alert('Hello, World!'),
label: 'Alert me',
},
},
})
}
>
💥 Click me!
</Button>
</Stack>
);
};
Color Scheme
A toast can either be 'light' or 'dark'.
Warning
Color Scheme is only supported in the Bauhaus theme
live
() => {
const toast = useToast();
return (
<Stack direction="row" spacing="400">
<Button
onClick={() =>
toast({
description: 'I am a light toast',
props: { colorScheme: 'light' },
})
}
>
🌞 Light Toast
</Button>
<Button
onClick={() =>
toast({
description: 'I am a dark toast',
props: { colorScheme: 'dark' },
})
}
>
🌑 Dark Toast
</Button>
</Stack>
);
};
Image
A toast can display an image.
Warning
The image prop is only supported in the Bauhaus theme
By default the toast will be shown for 5 seconds, but we can change it by
passing the duration prop.
live
() => {
const toast = useToast();
return (
<Stack direction="row" spacing="400">
<Button
onClick={() =>
toast({
description: 'I will be shown for 2 seconds',
duration: 2000,
})
}
>
⏱ 2 seconds
</Button>
<Button
onClick={() =>
toast({
description: 'I will be shown for 10 seconds',
duration: 10000,
})
}
>
⏱ 10 seconds
</Button>
</Stack>
);
};
States
A toast can be in a loading or error state.
live
() => {
const toast = useToast();
return (
<Stack direction="row" spacing="400">
<Button
onClick={() =>
toast({
description: 'I am loading',
status: 'loading',
props: {
action: { callback: () => {}, label: 'Loading' },
},
})
}
>
⏱ Loading...
</Button>
<Button
onClick={() =>
toast({
description: 'I have an error',
status: 'error',
})
}
>
❌ Error
</Button>
</Stack>
);
};
On close complete
A function can run when the toast is closed.
live
() => {
const toast = useToast();
return (
<Button
onClick={() =>
toast({
description: 'Close me!',
onCloseComplete: () => {
alert('toast closed!');
},
})
}
>
Click me
</Button>
);
};
Custom Content
To display custom content instead of the default description message and
dismiss or action button, use the content variant and pass the custom content
as the children prop.
The content variant will display an icon-based close button in the top right
of the toast container.
Warning
The content variant is only supported in the Bauhaus theme. Pass a custom
render function to render custom content in the legacy theme.