Timeline

The EuiTimeline component standardizes the way a timeline thread is displayed. Pass an array of EuiTimelineItem objects and EuiTimeline will generate a timeline thread.

This component allows you to create any type of timeline, but for more specific use cases you should consider:

EuiSteps: a timeline that allows you to present instructional content that must be conducted in a particular order and might contain progress indications.
EuiCommentList: a timeline that allows you to display comments or logging actions that either a user or a system has performed.

Accessibility requirement

For accessibility, it is required to wrap your EuiTimelineItem's with a EuiTimeline. It is highly recommended to provide a descriptive

aria-label, or a text node ID of an external label to the aria-labelledby prop of the EuiTimeline.

Timeline item

Each EuiTimelineItem has two parts: an icon on the left side and an event on the right side. To create an item you need the following props:

icon: main icon that appears on the left side. Can be passed as any IconType string or custom node (e.g. EuiAvatar). It is recommended not to use an element larger than 40x40.
children: any node as the event content.

A timeline thread with multiple items

You can create a timeline thread by rendering multiple EuiTimelineItem components in a EuiTimeline. Following this structure ensures that timeline styles are applied correctly and appropriate semantic elements are used to assist with screen readers.

When passing an icon and children prop to each item, there are some design considerations to take into account:

icon: use icons of the same size to create a better visual consistency.
children: when your content is just one line of text, the recommendation is to use an EuiText as a wrapper. For multi-line content consider using a EuiPanel or a EuiSplitPanel instead. For other types of components like editors, the recommendation is to pass the children without any wrapper.

The following example shows how to display multiple EuiTimelineItems and how you can use a EuiSplitPanel as the content wrapper.

Props

EuiTimeline

Extends HTMLAttributes


Prop	Description and type	Default value
Prop items#	Description and type List of timeline items to render. See #EuiTimelineItem Type: `EuiTimelineItemProps[]`	Default value `[]`
Prop gutterSize#	Description and type Sets the size of the vertical space between each timeline item Type: `"m" \| "l" \| "xl"`	Default value `xl`
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value

EuiTimelineItem

Extends HTMLAttributes


Prop	Description and type	Default value
Prop icon#	Description and type Any `ReactNode`, but preferably `EuiAvatar`, or a `string` as an `EuiIcon['type']`. Type: `string \| number \| boolean \| ReactElement \| Iterable<ReactNode> \| ReactPortal \| ComponentClass<...> \| FunctionComponent<...>`	Default value Required
Prop children#	Description and type Accepts any node. But preferably `EuiPanel` Type: `ReactNode`	Default value Required
Prop verticalAlign#	Description and type Vertical alignment of the event with the icon Type: `"center" \| "top"`	Default value `center`
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop iconAriaLabel#	Description and type Specify an `aria-label` for the icon when passed as an `IconType`. If no `aria-label` is passed we assume the icon is purely decorative. Type: `string`	Default value

EuiTimelineItemEvent


Prop	Description and type	Default value
Prop children#	Description and type Accepts any node. But preferably `EuiPanel` Type: `ReactNode`	Default value Required
Prop verticalAlign#	Description and type Type: `"center" \| "top"`	Default value `center`

EuiTimelineItemIcon


Prop	Description and type	Default value
Prop icon#	Description and type Any `ReactNode`, but preferably `EuiAvatar`, or a `string` as an `EuiIcon['type']`. Type: `string \| number \| boolean \| ReactElement \| Iterable<ReactNode> \| ReactPortal \| ComponentClass<...> \| FunctionComponent<...>`	Default value Required
Prop verticalAlign#	Description and type Type: `"center" \| "top"`	Default value `center`
Prop iconAriaLabel#	Description and type Specify an `aria-label` for the icon when passed as an `IconType`. If no `aria-label` is passed we assume the icon is purely decorative. Type: `string`	Default value

Timeline item.css-1pgbpvp{-webkit-margin-start:8px;margin-inline-start:8px;opacity:0;}.css-1pgbpvp:focus,.heading:hover .css-1pgbpvp{opacity:1;}

A timeline thread with multiple items

Props

Timeline item