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
Timeline
Designer doc
Timeline component displays a sequence of events in chronological order.
Example
Basic Usage
View code
Variants
You can specify variant as contained or text. contained will be the default option.
View code
Dot sizes
You can specify dotSize as small, medium or large. large will be the default option.
View code
View code
TimelineContent and TimelineInfo
You can use TimelineContent to display data inside TimelineItem.
View code
Alternatively, you can use TimelineInfo to display a different structure inside TimelineItem.
View code
Colors
For TimelineStatus and TimelineDot components, you can specify colorType prop as theme colors like primary, error, success. If none of the color type fits, you can specify color prop.
View code
Adding Badge and Tooltip
View code
Customizing line connector
You can override connector prop with TimelineConnector or anything else. Note that last TimelineItem by default doesn’t render the TimelineConnector. However, you can specify connector prop on it to display dangling line.
View code
Connector gap
You can specify connectorGap as a number to specify the gap.
View code
Center alignment
Center align the dot
View code
Expansible timeline
View code
References
- Ant Design: https://ant.design/components/timeline
- Material UI: https://material-ui.com/components/timeline
API
Timeline
| Prop name | Type | Default | Description |
|---|---|---|---|
| align | TimelineAligns | top | |
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| connectorGap | number | 0 | |
| dotSize | TimelineDotSizes | large | |
| variant | TimelineVariants | contained |
TimelineConnector
| Prop name | Type | Default | Description |
|---|---|---|---|
| isLast | boolean |
TimelineConnectorBefore
| Prop name | Type | Default | Description |
|---|---|---|---|
| isFirst | boolean |
TimelineContent
| 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. | |
| headerProps | HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement>; } | ||
| innerProps | HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement>; } | ||
| label | ReactNode | ||
| time | ReactNode |
TimelineDot
| 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 | accPri1st | |
| size | number |
TimelineInfo
| 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. | |
| contentProps | BaseTypographyProps | ||
| remark | ReactNode | ||
| remarkProps | BaseTypographyProps | ||
| status | ReactNode | ||
| statusProps | BaseTypographyProps | ||
| title | ReactNode | ||
| titleProps | BaseTypographyProps |
TimelineItem
| 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. | |
| cardProps | HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement>; } | ||
| connector | ReactNode | ||
| connectorBefore | ReactNode | ||
| dot | ReactNode | ||
| index | number | ||
| sequenceProps | HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement>; } |
TimelineStatus
| 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 | accPri1st | |
| remark | ReactNode | ||
| remarkProps | HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement>; } | ||
| statusProps | HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement>; } |