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
Alert
Designer doc
Alert component to notify users of information, warnings or errors.
Example
Basic Usage
View code
Controlling closed state
View code
Customizing icons
By default, Alert adds an icon based on the type prop. You can specify your custom icon or pass null to hide it.
View code
Title
View code
Footer Actions
View code
References
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/example-index/alert/alert.html
- Ant Design: https://ant.design/components/alert/
- Reach-UI: https://reacttraining.com/reach-ui/alert
API
Alert
| Prop name | Type | Default | Description |
|---|---|---|---|
| actions | ReactNode | ||
| actionsProps | DivProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| closed | boolean | ||
| containerRef | Ref<HTMLDivElement> | @deprecated Please pass ref directly instead. | |
| contentProps | DivProps | ||
| descriptionProps | DivProps | ||
| footerActions | ReactNode | ||
| footerActionsProps | DivProps | ||
| icon | ReactNode | ||
| iconWrapperProps | DivProps | ||
| immediate | boolean | ||
| initialClosed | boolean | ||
| onClose | (closed: boolean) => void | ||
| title | ReactNode | ||
| titleProps | DivProps | ||
| type | AlertTypes | info |
AlertClose
| 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 | flat |