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
StatusIndicator
Designer doc
StatusIndicator component visually conveys the current state of a process or item, using colors and icons.
Example
Basic usage
Both color and colorType props can be used to change the color.
Blue
Error
View code
Sizing
There are two size available which are Medium (default) and Small.
Small
Medium
View code
Customizing left element
1.29%
View code
API
StatusIndicator
| 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. | |
| color | string | ||
| colorType | ColorTypes | ||
| leftElement | ReactNode | ||
| size | StatusIndicatorSizes | medium |