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
Empty
Designer doc
This component is deprecated. Please use the Result component instead.
Empty component.
Example
Basic Usage
By default, the height is fit the content. You can specify height prop as a shorthand for style prop height.
View code
Adding Buttons
You can add buttons or any other contents by rendering inside (i.e. children prop).
View code
Image Size
By default the image size is 168px, you can customize it using imageSize prop as a shorthand for imageProps={{ style: { width, height } } }.
View code
Available Illustrations
If you need higher resolution images, you can add suffix @2x or @3x.
For example: import img404 from '@seaweb/coral/images/404@3x.png'.
View code
Custom Image
View code
API
Empty
| 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. | |
| description | ReactNode | ||
| descriptionProps | HTMLAttributes<HTMLParagraphElement> & { as?: any; ref?: HTMLParagraphElement; } | ||
| height | Height<string | number> | ||
| image | ReactNode | ||
| imageProps | ImgHTMLAttributes<HTMLImageElement> & { as?: any; ref?: HTMLImageElement; } | ||
| imageSize | Height<string | number> | ||
| title | ReactNode | ||
| titleProps | HTMLAttributes<HTMLDivElement> & { as?: any; ref?: HTMLDivElement; } |