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
Balloon
Designer doc
Balloon component is a popup commonly used for confirmation or acknowledging additional information.
Example
Basic Usage
View code
Controlled
View code
Accessibility
By default, popup opens when reference is clicked or by pressing arrow key down.
When popup opens, the content will be autofocused. When closed, the popup returns the focus back to the reference. Tabbing through items in the popup is guarded such that the start and end return the focus back to the reference.
Pressing Escape will close the popup, pressing any printable character will return the focus to the reference. This is to handle the case where reference is an input text.
View code
References
- Ant Design’s Popconfirm: https://ant.design/components/popconfirm/
- Ant Design’s Popover: https://ant.design/components/popover/
- Material-UI: https://material-ui.com/components/popover/
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-6-keyboard-navigation-inside-components
- WAI-ARIA Menu Button: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/
API
Balloon
| Prop name | Type | Default | Description |
|---|---|---|---|
| active | boolean | ||
| arrow | ArrowProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| container | HTMLElement | configs.getPortalContainer('Balloon', 'container') | |
| content | ReactNode | ||
| focusOnOpen | boolean | true | |
| immediate | boolean | ||
| initialActive | boolean | ||
| offset | [number, number] | [0, 2] | |
| onActiveChange | (active: boolean) => void | ||
| onComponentBlur | () => void | Callback function that will be called when the whole Balloon component is blurred. | |
| placement | Placements | top | |
| popperOptions | PopperPopperOptions | Options for floating.ui instance | |
| popperUpdateKey | string | ||
| shouldKeyDownReturn | (e: KeyboardEvent<HTMLDivElement>) => boolean | By default when the focus is within the balloon content, press any keys other than esc will move the focus back to the trigger element. Use this prop if you want to change this behavior, the boolean returned from this function will decide if the key down event should return the focus to trigger element. | |
| springConfig | Partial<AnimationConfig> | { tension: 720, mass: 0.5 } |
BalloonButton
| 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[] | ||
| leftIcon | ReactNode | Element before the label. Equivalent to element on the label with some margin. | |
| 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 | number | ||
| rightIcon | ReactNode | Element after the label. Equivalent to element on the label with some margin. | |
| size | ButtonSizes | ||
| variant | ButtonVariants | Prefers naming it as variant because type is a known button html property. |
BalloonClose
| 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 |
BalloonContent
| 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. | |
| closeElement | ReactNode | ||
| closeProps | DivProps | ||
| contentProps | DivProps | ||
| title | ReactNode | ||
| titleProps | DivProps |