Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Toast
Designer doc
Toast is just a simple styled component. If you’re looking for toast notification, check out integration with Pusher below to achieve that. Pusher and Toast are separated due to flexibility concern, in goal that Pusher should also be able to push other elements, not only Toast.
Example
Basic Usage
View code
Actions
There is a component called ToastClose to render the cross icon. Please refer to More Examples to see how to integrate with Pusher to close a toast.
View code
Custom Icon
By default, Coral Toast determines which icon to use based on type prop. You can customize by specifying icon prop or remove the icon by passing null to it.
View code
Combining Toast and Pusher
View code
More Examples
View code
Accessibility
There are differences between status and alert role, one of them is that status role does not interrupt currently read text. On the other hand, alert role interrupts because it’s a time sensitive message.
Toast determines which one of the two roles to use based on type prop: success and info have status role, while warning and fail have alert role.
Relevant components
References
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
- MDN - Status Role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role
- MDN - Alert Role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role
- Material Design: https://material.io/develop/web/components/snackbars/#screen-readers
API
Toast
| Prop name | Type | Default | Description |
|---|---|---|---|
| actionContainerProps | DivProps | ||
| actions | ReactNode | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| contentContainerProps | DivProps | ||
| footerActions | ReactNode | ||
| footerActionsProps | DivProps | ||
| icon | ReactNode | ||
| iconWrapperProps | DivProps | ||
| type | ToastTypes | info |
ToastClose
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| loading | boolean | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | string | ||
| size | IconButtonSizes | ||
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants |