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 blogsWelcome
Welcome component is a specialized variant of Result component designed for welcome screens, onboarding flows, and introductory interfaces in Chat interfaces.
Example
Basic Usage
A simple welcome screen with image, title, and description:
Welcome to our platform
Get started with our amazing features and tools
View code
With Action Buttons
Add action buttons for user interaction:
Welcome to our platform
Get started with our amazing features and tools
Learn more about our bot
Introduce Coral to me
View code
Maximum Width Control
Control the maximum width of the content area:
Some very long title that would normally take up more space
This is a very long description that would normally span across a wider area, but is constrained by the maxWidth setting
Learn more about our bot
Introduce Coral to me
View code
Container Height and Positioning
Use height and offsetTop(margin-top) as using css attributes directly.
Full Screen Welcome
This welcome screen takes up the full viewport height
Get started
View code
Relevant components
API
Welcome
| 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> | Will not applied if image is a ReactNode | |
| maxWidth | MaxWidth<string | number> | ||
| offsetTop | MarginTop<string | number> | ||
| title | ReactNode | ||
| titleProps | HTMLAttributes<HTMLDivElement> & { as?: any; ref?: HTMLDivElement; } |