## Feature Examples
### Structure
- description: Add content to a timeline by using `items` prop. Each item has props to control these containers:
- `customPrefix` - overrides the default circle with a specified icon to mark important milestones.
- `label` - describes the event.
- `labelAction` - enables an action that provides more info or leads to an event.
- `suffix` - displays event’s date or other additional info.
Note that all of these containers are nodes (i.e., can store any component as a child item). Their positions are fixed.
- example:
```jsx
```
### Gap
- description: Control vertical distance between the items with a `gap` prop.
Default value is 30 px.
- example:
```jsx
```
### Label
- description: Set the content for an item’s label with a `label` prop.
Label describes the event of the Timeline item. It wraps into multiple lines where necessary.
Note that the label container accepts any component as a child item.
- example:
```jsx
```
### Label action
- description: Add an action button for a Timeline’s item using a `labelAction` prop.
Use it as a link to actions or further information about the Timeline item.
- example:
```jsx
```
### Custom Prefix
- description: Set a custom icon for a Timeline item with a `customPrefix` prop. Use it to highlight important milestones or errors.
Control it for each item individually.
When not defined, prefix is a default filled-in circle.
- example:
```jsx
```
### Suffix
- description: Add more information to the Timeline item with a `suffix` prop.
Use it to show the date of an event (but it can also render any component as a child item).
- example:
```jsx
```
## Common Use Case Examples
### Store Order Activity
- description: Illustrate the history of a product order with a Timeline, stored inside a ``.
In this case, users can fill in recent events into the Timeline themselves, change events’ status, and view more related information.
- example:
```jsx
```