Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2026 Sea Labs
Blogs
All blogsSideSheet
Designer doc
SideSheet is similar to Drawer, but typically used to display more detailed information or actions related to current content.
Example
Menu Bar Level
View code
Primary Page Content Level
View code
Tab Content Level
You can use EllipsisTooltip if the title is very long.
View code
Animations
To disable animation, you can specify prop immediate to true.
View code
References
- Material Design: https://material.io/components/sheets-side
- Material UI: https://mui.com/material-ui/react-drawer/#persistent-drawer
API
SideSheet
| 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 | 320 | |
| immediate | boolean | ||
| initialIsOpen | boolean | true | |
| isOpen | boolean | ||
| onClose | () => void | ||
| returnFocusTo | Element |
SideSheetBox
| 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. |
SideSheetClose
| 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. | |
| gradientBorderProps | GradientBorderProps | ||
| 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 |
SideSheetContent
| 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. |
SideSheetTitle
| 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. |