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
Layout
Layout component helps user to deal with layout structure in page level. This component API design is highly inspired by Ant Design’s Layout.
Example
Basic Usage
Layout is a flex component which direction switches between row and column on each wrap.
View code
Sidebar Variants
Sidebar has three variants: Dark, Grey, and White (default). This variants also affect the SideMenu components rendered inside it.
View code
Navbar Variants
Navbar has two variants: Dark (default) and White. These variants also affect the Menubar components rendered inside it.
View code
Logo Variants
NavbarVariants is used for Logo variants, which have two variants: Dark (default) and White.
note: the example below uses different logo images for two variants, the size is a bit different
View code
Scrolling content
Topmost Layout has height of 100vh and vertically scrollable by default. If you want to set to specific height, just override with style prop manually.
View code
Different Structure
Topmost Layout uses column direction by default. If you have a layout like example below, where the topmost Layout is in row, you can pass "row" to direction prop. This kind of layout is used by Material-UI documentation.
View code
Keyboard navigation with SkipNav
By default, topmost Layout adds SkipNav component, and collects all mounted regions (i.e. Main, Sidebar, but Navbar is not by default).
Below is an example to demonstrate how this can be helpful for keyboard users. The example overlays the Layout with pointer-events:none, so you are not able to interact using mouse. Instead, try to use Tab to click the red “Alert” button.
On a side note, this is also one way to do a QA Accessibility Test.
View code
If for some reason you want to completely remove the default SkipNav, you can specify skipNav to be null in topmost Layout.
View code
Disabling individual SkipNav
To disable individual region skip nav link, you can specify boolean skipNavable to each Main, Sidebar, or Navbar. This can be helpful when, for example, Main is the only thing on the page, it doesn’t make much sense to jump to a region which is just next to it.
Below is an example where Main is not skippable, so the only thing left is “Skip to sidebar”.
View code
References
- Ant Design: https://ant.design/components/layout
- Reach-UI SkipNav: https://reacttraining.com/reach-ui/skip-nav/
- WebAIM SkipNav: https://webaim.org/techniques/skipnav/
- MDN HTML <main> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main
API
Layout
| 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. | |
| direction | LayoutDirections | Default direction depends on the parent. On the top level, default direction is column. This is normally when you have an app with navigation bar on top.The next Layout within a Layout will change direction, e.g. if parent has column as its direction, the child Layout's is row, vice versa. | |
| skipNav | ReactElement<any, any> | Top Layout adds SkipNav component by default. |
Logo
| 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. | |
| dividerProps | HTMLAttributes<HTMLDivElement> & { as?: any; ref?: HTMLDivElement; } | ||
| imgProps | AvatarProps | ||
| src | string | ||
| variant | NavbarVariants |
Main
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | main | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
| skipNavable | boolean | true | Whether the region is added to SkipNav component. |
Navbar
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | header | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
| elevationLevel | number | 2 | |
| skipNavable | boolean | Whether the region is added to SkipNav component. | |
| variant | NavbarVariants | dark |
Sidebar
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | aside | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
| collapsed | boolean | ||
| initialCollapsed | boolean | ||
| onCollapsedChange | (collapsed: boolean) => void | ||
| skipNavable | boolean | true | Whether the region is added to SkipNav component. |
| variant | SidebarVariants | white |
SidebarCollapse
| 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 | small | |
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| uncollapsedVariant | SidebarVariants | white | |
| variant | IconButtonVariants | outlined | |
| wrapperProps | HTMLAttributes<HTMLDivElement> & { as?: any; ref?: HTMLDivElement; } |
SkipNav
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |