Skip to main content
Elastic UI
Elastic UI
DocumentationPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Introduction
  • Guidelines
    • Getting started
    • Testing
  • Components
    • Templates
      • Super date picker
    • Layout
      • Accordion
      • Bottom bar
      • Flex
      • Flyout
      • Header
      • Horizontal rule
      • Modal
      • Page header
      • Panel
      • Popover
      • Resizable container
      • Spacer
    • Navigation
      • Breadcrumbs
      • Button
      • Collapsible nav
      • combo_box
      • Context menu
      • Facet
      • Key pad menu
      • Link
      • Pagination
      • Side nav
      • Steps
      • Tabs
      • Tree view
    • Display
      • Aspect ratio
      • Avatar
      • Badge
      • Callout
      • Card
      • Comment list
      • Description list
      • Drag and drop
      • Empty prompt
      • Health
      • Image
      • List group
      • Loading
      • Progress
      • Skeleton
      • Stat
      • Text
      • Timeline
      • Title
      • Toast
      • Tooltip
      • Tour
    • Forms
      • Form controls
      • Selection controls
      • Form layouts
      • Compressed forms
      • Form validation
      • Auto refresh
      • Color selection
      • Combo box
      • Date picker
      • Expression
      • Filter group
      • Inline edit
      • Range sliders
      • Search bar
      • Selectable
      • Super select
  • content
  • data_visualization
  • EUI Docgen output demo
  • patterns
  • EUI
  • Components
  • Display
  • Timeline

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

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

Edit this page
Previous
Testing
Next
Title
  • Timeline item
  • A timeline thread with multiple items
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic