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.

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.

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.

Loading...

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.

Loading...

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 a a 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.

Loading...

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

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

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

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 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 ↵

𐘂𐘂