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
Blogs
All blogsResult
Designer doc
Result component helps user to display customizable placeholder for empty state.
Example
Basic Usage
View code
Image sizes
Image size is defaulted to 144px. You can use the imageSize prop to customize the Image size to your requirement
View code
Maximum width
Title, descriptions and actions by default have a maximum width of 480px. You can override this with the maxWidth prop. The example below has a maximum width of 288px.
View code
Container height
By default the height will fit the content. You can specify height prop to adjust the offset too - in most cases for full page result you can set it to 50vh.
View code
Offset top
Aside from height prop, you can use the offsetTop prop to adjust the margin top, with respect to the parent container.
The below example has an offset percentage of 20%.
View code
Optional components
title, description and actions props are optional.
View code
View code
Available Illustrations
View code
Using icons as images
View code
API
Result
| Prop name | Type | Default | Description |
|---|---|---|---|
| actionProps | HTMLAttributes<HTMLDivElement> & { as?: any; ref?: HTMLDivElement; } | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| description | ReactNode | ||
| descriptionProps | HTMLAttributes<HTMLParagraphElement> & { as?: any; ref?: HTMLParagraphElement; } | ||
| height | Height<string | number> | ||
| image | ReactNode | NextImgProps | ||
| imageProps | ImgHTMLAttributes<HTMLImageElement> & { as?: any; ref?: HTMLImageElement; } | ||
| imageSize | Height<string | number> | 144 | Will not applied if image is a ReactNode |
| maxWidth | MaxWidth<string | number> | 480 | |
| offsetTop | MarginTop<string | number> | ||
| title | ReactNode | ||
| titleProps | HTMLAttributes<HTMLDivElement> & { as?: any; ref?: HTMLDivElement; } |