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
Tabs
Designer doc
Coral Tabs separate TabList from TabPanels (unlike Ant Design, Angular Material, and Material-UI, and more like Reach-UI). This adds more flexibility for TabList placement: you can place it on top, bottom, or even inside another component.
Example
Basic usage
View code
TabList Scrollable
For horizontal orientation, when TabList overflows, user can scroll to see hidden tabs.
View code
Display more tabs in list
Another alternative when TabList is expected to overflow, TabListWithMore can be used to show the hidden tabs under more menu.
View code
Controlled
Controlled Tabs can be useful, like when you need to route it. Coral should never have dependency of React-Router because it’s too application specific. Otherwise, think about what would happen to Reach Router, or any other router libraries application?
Below is an example with React Router’s MemoryRouter to sort of mock the URL instead of using the real one. So, don’t include MemoryRouter in your application, just use your normal BrowserRouter.
View code
Tab Variants
Variants can be applied to individual TabList basis. In other words, you can also have multiple TabList styles within the same Tabs if you need.
Variant Card
View code
Variant Text
View code
Note that this text variant is the least accessible of all because it only indicates whether a tab is active by color. This is hard to differentiate by color-blind user.
On the other hand, variant card has outline and bar has underline indicator for active tab, where color-blind user can still easily distinguish from the non-active ones.
Editable tabs
Use rightElement prop to pass in TabClose component for closeable tab.
View code
Enabling Animation
The animation is by default disabled because most of the time the content is packed and becomes jarring. You can enable the animation through prop immediate to TabPanels.
View code
Unmount Inactive
By default, TabPanel doesn’t unmount and only hides the children when inactive. In some cases like loading some data on Tab active, you may prefer mounting and unmouting them. You can pass prop unmount to TabPanels to achieve this behaviour.
View code
Accessibility
- Tab: When focus moves into the tab list, places focus on the active tab element. When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.
When focus is on a tab element in a tab list:
-
Left (horizontal) or Up (vertical) Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab.
-
Right (horizontal) or Down (vertical) Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab.
References
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
- Reach-UI: https://reacttraining.com/reach-ui/tabs/
- Ant Design: https://ant.design/components/tabs/
- Angular Material: https://material.angular.io/components/tabs/overview
API
Tab
| 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. | |
| containerProps | InnerProps | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| index | number | ||
| keyboardClickKeys | string[] | ||
| 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> | ||
| rightElement | ReactNode | ||
| wrapperProps | InnerProps |
TabClose
| 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 | neuFore3rd | 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 | small | |
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants |
TabList
| 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. | |
| itemHeight | number | ||
| showOverflow | boolean | true | |
| underline | ReactElement<any, string | JSXElementConstructor<any>> | ||
| variant | TabVariants | bar |
TabListWithMore
| 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. | |
| initialOverflows | ObjectOf<boolean> | {} | |
| itemHeight | number | ||
| menuButtonProps | BaseButtonProps | ||
| menuProps | MoreMenuProps | when tab list oveflow, more menu will show up | |
| overflows | ObjectOf<boolean> | ||
| showOverflow | boolean | ||
| underline | ReactElement<any, string | JSXElementConstructor<any>> | ||
| variant | TabVariants | bar | |
| wrapperProps | HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement>; } |
TabPanel
TabPanels
| 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. | |
| immediate | boolean | true | |
| unmount | boolean | ||
| wrapper | any | ||
| wrapperRef | LegacyRef<HTMLDivElement> |
TabUnderline
| 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. | |
| basis | number | 2 | Either width or height. |
Tabs
| 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. | |
| index | number | ||
| initialIndex | number | 0 | |
| onChange | (index: number) => void | ||
| orientation | TabsOrientations | horizontal |