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
IconButton
Designer doc
IconButton wraps BaseButton and Tooltip, making it a considerably high-level abstraction component.
Example
Variants
Icon Button has 3 variants: Flat (default), Contained, and Outlined.
View code
Sizing
There are two size using in Coral system which are Medium (default) and Small.
View code
Colors
View code
Disabled
View code
Loading
loading Icon Button is disabled by default and use Spinner as children
View code
Basic Usage
You can create the tooltip by specifying tooltip prop.
View code
Customizing Tooltips
You can pass available Tooltip props (except title, you should use IconButton tooltip instead) to tooltipProps like below:
View code
References
API
IconButton
| 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 | 4px | |
| size | IconButtonSizes | medium | |
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants | flat |