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
AlertDialog
Designer doc
This component is deprecated. Please use the Dialog component instead.
An alert dialog is a modal dialog that interrupts the user’s workflow to communicate an important message and acquire a response. Examples include action confirmation prompts and error message confirmations.
This component is built on top of Dialog and its compound components.
Example
View code
References
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/alertdialog.html
- Reach-UI: https://reacttraining.com/reach-ui/alert-dialog/
- Material-UI: https://material-ui.com/components/dialogs/#alerts
API
AlertDialog
| 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. | |
| container | HTMLElement | ||
| disableFocusLock | boolean | ||
| disableScrollLock | boolean | ||
| elevationLevel | number | ||
| immediate | boolean | ||
| initialIsOpen | boolean | ||
| isOpen | boolean | ||
| onClose | () => void | ||
| onOutsideClick | MouseEventHandler<HTMLDivElement> | ||
| returnFocusTo | Element | ||
| transitionFrom | Element | ||
| type | DialogTypes |
AlertDialogActions
| 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. |
AlertDialogBox
| 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. | |
| autoFocus | boolean | ||
| disableFocusLock | boolean | ||
| disableScrollLock | boolean | ||
| type | DialogTypes |
AlertDialogClose
| 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 | neuFore2nd | 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 |
AlertDialogDescription
| 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. |
AlertDialogOverlay
| 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. | |
| container | HTMLElement | ||
| elevationLevel | number | ||
| immediate | boolean | ||
| initialIsOpen | boolean | ||
| isOpen | boolean | ||
| onClose | () => void | ||
| onOutsideClick | MouseEventHandler<HTMLDivElement> | ||
| returnFocusTo | Element | ||
| transitionFrom | Element |
AlertDialogTitle
| 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. |