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
Result
Designer doc
Result component helps user to display customizable placeholder for empty state.
Example
Basic Usage
No results
Some description can be placed here to describe the type of record you are searching for
Back
Create entry
View code
Image sizes
Image size is defaulted to 144px. You can use the imageSize prop to customize the Image size to your requirement
No users found
Description for what a user is
Back
Create user
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.
Some long long long long long long long long title
Some long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long description
Back
Create user
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.
No users found
Description for what a user is
Back
Create user
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%.
Some title
Some description
Back
Create user
View code
Optional components
title, description and actions props are optional.
View code
Back
Do something
View code
Available Illustrations
NotFound
InternalServerError
AddJob
AddPeople
Approval
ApprovalChain
BallotBox
Bill
Chip
Clipboard
Comment
EmptyBox
File
FileData
FileSearch
InProgress
NoPeople
Safe
Search
SearchDropdown
Servers
SystemMaintenance
SystemSecurity
UnknownError
View code
Using icons as images
Status change to Meeting / Voting
View form
Go to Edit
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; } |