Skip to main content

Timeline

A Timeline step displays a single event or action of the Timeline tracker.

github
View source code
figma
View design
import { Timeline } from '@uhg-abyss/mobile';
          (
            <Timeline currentStep={1} paragraph="Paragraph text in the active step card">
              <Timeline.Step
                heading="Application Received and Processing"
                date={new Date(2024, 6, 17)}
                paragraph="Paragraph would go here"
              />
              <Timeline.Step
                heading="CMS Determination"
                date={new Date(2024, 6, 19)}
                paragraph="Paragraph would go here"
              />
              <Timeline.Step heading="Determination Outcome" />
              <Timeline.Step heading="UCard Shipped" />
              <Timeline.Step
                heading="Plan coverage begins"
                date={new Date(2025, 1, 1)}
                paragraph="Paragraph would go here"
                content={
                  <Button size="small" type="outline">
                    Button
                  </Button>
                }
              />
            </Timeline>
          );

          Steps​

          Use the Timeline.Step subcomponent to define each step in the Timeline. The steps are rendered in the same order they are defined, so the first child will be the first step, the second child will be the second step, and so on.

          This section covers the props available for Timeline.Step.

          Heading​

          Use the heading prop to set the heading of the step. This prop is required.

          Date​

          Use the date prop to set the date of the step. This prop accepts either a string or a Date object. If a Date object is passed, it will be formatted as MM/DD/YYYY.

          Date range​

          Pass a { startDate, endDate } object to the date prop to display a date range on the step. The range is rendered as startDate – endDate.

          Paragraph​

          Use the paragraph prop to add descriptive text below the date for the step.

          Content​

          Use the content prop to add custom components to the bottom of the step.

          Current step​

          Use the currentStep prop to set the currently active step in the Timeline. This prop accepts the 1-indexed step number (i.e. 1 is the first step, not 0).

          Note

          If the value of currentStep is higher than the number of steps, the Timeline will display all steps as complete.

          Current step completion state​

          By default, the currentStep will be in progress. Use the activeStepCompletionState prop to change the completion state of the current step. The available states are 'in-progress' and 'completed'. The default value is 'in-progress'.

          Tip

          Use 'completed' to indicate that the current step in the process is complete, but the next step has not yet begun.

          Variant​

          Use the variant prop to change the color palette of the Timeline. The available variants are 'default', 'warning', 'error', and 'info'. The default value is 'default'.

          Note

          Only the active step will change appearance based on the variant.

          Type​

          Use the type prop to change the layout of the Timeline. The default type is 'combo'.

          • 'combo' displays the active step card with the steps contained in a card directly below.
          • 'card' wraps the steps within a card. 'card' does NOT contain the active step card.
          • 'progress' displays only the timeline steps without any wrapper.

          Combo​

          The 'combo' type includes an active step card that can display additional content using the following props (rendered in order):

          PropPurposePlacement
          paragraphDescriptive text explaining the current stepBelow the heading
          contentInformational components (text, lists, links)Below paragraph
          buttonCall-to-action buttonBelow content

          Card​

          Progress​

          Heading weight​

          Use the headingWeight prop to modify the font weight of all non-active step headings. The default value is '$core.font-weight.regular'.

          Custom heading​

          Use the heading prop to override the default "Timeline History" heading rendered on the timeline card. This applies to the 'combo' and 'card' types.

          Hide step numbers​

          Use the hideStepNumbers prop to hide the "Step X:" prefix from each step heading and the active step card.

          Note

          The step number remains available to screen readers for accessibility.

          Hide state​

          Use the hideState prop to hide the status text (e.g. "In Progress", "Completed") from each step.

          Note

          The status remains available to screen readers for accessibility.

          Reverse order​

          Use the reverseOrder prop to control the chronological direction of the timeline. Set it to true to flip the step order and the track's progress direction. The default is false. Step numbers and completion states remain tied to the original order.

          Use the footer prop to add content at the very bottom of the Timeline, below all timeline steps.

          Timeline Props​

          NameTypeDefaultRequiredDescription
          activeStepCompletionState
          'in-progress' | 'completed' | undefined
          'in-progress'
          		-
          The completion state of the active timeline step
          button
          React.ReactNode | never | undefined
          		--
          Custom button. Placed at the bottom below 'content'
          children
          React.ReactNode
          		-
          Timeline steps
          content
          React.ReactNode | never | undefined
          		--
          Custom content. Placed below 'paragraph' and above 'button'
          currentStep
          number
          		-
          The active timeline step
          footer
          React.ReactNode | undefined
          		--
          Content placed at the very bottom of the Timeline, below all timeline steps
          heading
          string | undefined
          'Timeline History'
          		-
          Overrides the default heading text of the timeline card
          headingAccessibilityRole
          AccessibilityRole | undefined
          'header'
          		-
          Accessibility role for the heading of the Timeline
          headingWeight
          Abyss.FontWeight | undefined
          '$core.font-weight.regular'
          		-
          Defines the heading weight of all inactive timeline steps
          hideState
          boolean | undefined
          false
          		-
          Hides the status text (e.g. "In Progress", "Completed") on each timeline step
          hideStepNumbers
          boolean | undefined
          false
          		-
          Hides the "Step X:" prefix on each timeline step heading
          paragraph
          string | never | undefined
          		--
          Custom paragraph text. Placed below the heading
          reverseOrder
          boolean | undefined
          false
          		-
          Reverses the chronological direction of the timeline. When true, steps are
          displayed in reverse order and the track's progress direction is flipped.
          type
          'combo' | 'card' | 'progress' | undefined
          'combo'
          		-
          Defines the layout type of timeline
          variant
          'default' | 'warning' | 'error' | 'info' | undefined
          'default'
          		-
          Defines the color palette of timeline

          Timeline.Step Props​

          NameTypeDefaultRequiredDescription
          content
          React.ReactNode | undefined
          		--
          Customizable content that is displayed at the bottom of the step
          date
          string | Date | { startDate: string | Date; endDate: string | Date } | undefined
          		--
          The date displayed under the heading and above the paragraph. Pass a
          { startDate, endDate } object to display a date range.
          heading
          string
          		-
          The step heading, a heading is required for every step
          headingAccessibilityRole
          AccessibilityRole | undefined
          		--
          Accessibility role for the heading of the Timeline Step
          paragraph
          string | undefined
          		--
          Text displayed below step

          Timeline Classes​

          Class NameDescription
          abyss-timeline-rootTimeline root element
          abyss-timeline-combo-cardTimeline active step card root
          abyss-timeline-combo-card-eyebrowTimeline active step card eyebrow
          abyss-timeline-combo-card-headingTimeline active step card heading
          abyss-timeline-combo-card-paragraphTimeline active step card paragraph
          abyss-timeline-combo-card-contentTimeline active step card content
          abyss-timeline-combo-card-button-wrapperTimeline active step card button wrapper
          abyss-timeline-cardTimeline card root
          abyss-timeline-card-headingTimeline card heading
          abyss-timeline-step-wrapperTimeline step wrapper

          Timeline.Step Classes​

          Class NameDescription
          abyss-timeline-step-rootTimeline step root element
          abyss-timeline-step-status-indicatorTimeline step status indicator
          abyss-timeline-step-solid-trackTimeline step solid track
          abyss-timeline-step-dashed-trackTimeline step dashed track
          abyss-timeline-step-contentTimeline step content
          abyss-timeline-step-headingTimeline step heading
          abyss-timeline-step-date-statusTimeline step date status
          abyss-timeline-step-paragraphTimeline step paragraph

          Timeline Translations

          Translation KeyValue
          disabledDisabled
          Timeline.historyTimeline History
          Timeline.currentStepCurrent Step
          Timeline.stepStep
          Timeline.activeIn Progress
          Timeline.incompleteNot Completed
          Timeline.completeCompleted

          Timeline Tokens​

          Token NameValue
          timeline.color.icon.complete
          #002677
          timeline.color.icon.active
          #FFFFFF
          timeline.color.surface.container
          #FFFFFF
          timeline.color.surface.track.default
          #002677
          timeline.color.surface.track.error
          #990000
          timeline.color.surface.track.warning
          #C24E14
          timeline.color.surface.track.info
          #196ECF
          timeline.color.surface.track.complete
          #002677
          timeline.color.surface.indicator.default
          #002677
          timeline.color.surface.indicator.error
          #990000
          timeline.color.surface.indicator.warning
          #C24E14
          timeline.color.surface.indicator.info
          #196ECF
          timeline.color.surface.indicator.complete
          #002677
          timeline.color.surface.indicator.active
          #002677
          timeline.color.text.heading
          #002677
          timeline.color.text.paragraph.default
          #002677
          timeline.color.text.paragraph.warning
          #C24E14
          timeline.color.text.paragraph.error
          #990000
          timeline.color.text.paragraph.info
          #196ECF
          timeline.color.text.paragraph.complete
          #323334
          timeline.color.text.paragraph.incomplete
          #323334
          timeline.color.text.status.default
          #002677
          timeline.color.text.status.warning
          #C24E14
          timeline.color.text.status.error
          #990000
          timeline.color.text.status.info
          #196ECF
          timeline.color.text.status.complete
          #323334
          timeline.color.text.status.incomplete
          #323334
          timeline.color.text.step-heading.default
          #002677
          timeline.color.text.step-heading.warning
          #C24E14
          timeline.color.text.step-heading.error
          #990000
          timeline.color.text.step-heading.info
          #196ECF
          timeline.color.text.step-heading.complete
          #323334
          timeline.color.text.step-heading.incomplete
          #323334
          timeline.color.border.container
          #CBCCCD
          timeline.color.border.heading
          #CBCCCD
          timeline.color.border.indicator
          #4B4D4F
          timeline.color.border.track
          #4B4D4F
          timeline.border-radius.all.container
          12
          timeline.border-radius.all.indicator
          500
          timeline.border-radius.all.track
          500
          timeline.border-width.all.container
          0.5
          timeline.border-width.all.indicator
          1
          timeline.border-width.all.track
          1
          timeline.border-width.bottom.heading
          0.5
          timeline.sizing.all.icon.complete
          24
          timeline.sizing.all.icon.active
          24
          timeline.sizing.all.indicator.width
          32
          timeline.sizing.all.indicator.height
          32
          timeline.spacing.padding.all.container
          16
          timeline.spacing.padding.all.complete-indicator
          8
          timeline.spacing.padding.top.heading
          24
          timeline.spacing.padding.bottom.heading
          16
          timeline.spacing.padding.bottom.step
          24
          timeline.spacing.padding.bottom.date-status
          4
          timeline.spacing.padding.right.container
          16
          timeline.spacing.gap.horizontal.heading
          16
          timeline.spacing.gap.horizontal.indicator
          8
          timeline.spacing.gap.horizontal.date-status
          4
          timeline.spacing.gap.vertical.track
          8
          timeline.spacing.gap.vertical.copy
          4
          timeline.spacing.gap.vertical.content
          12
          timeline.spacing.gap.vertical.container
          16
          timeline.box-shadow.container
          • Shadow Color: rgba(0,0,0,0.16)
          • Shadow Offset:
            • Width: 0
            • Height: 2
          • Shadow Opacity: 1
          • Shadow Radius: 4

          Timeline Classes​

          V2V1Status
          timeline-cardtimeline-cardUnchanged
          -timeline-card-dividerRemoved
          timeline-card-headingtimeline-card-headingUnchanged
          timeline-combo-cardtimeline-combo-cardUnchanged
          timeline-combo-card-button-wrappertimeline-combo-card-button-wrapperUnchanged
          timeline-combo-card-contenttimeline-combo-card-contentUnchanged
          -timeline-combo-card-dateRemoved
          -timeline-combo-card-eyebrowRemoved
          timeline-combo-card-headingtimeline-combo-card-titleRenamed
          timeline-combo-card-paragraphtimeline-combo-card-descriptionRenamed
          -timeline-combo-card-text-wrapperRemoved
          timeline-roottimeline-rootUnchanged
          timeline-step-wrappertimeline-step-wrapperUnchanged

          Timeline.Step Classes​

          V2V1Status
          -timeline-step-bottom-wrapperRemoved
          -timeline-step-bottom-wrapper-leftRemoved
          timeline-step-content-Added
          -timeline-step-content-wrapperRemoved
          timeline-step-dashed-track-Added
          -timeline-step-dateRemoved
          timeline-step-date-description-Added
          timeline-step-headingtimeline-step-titleRenamed
          -timeline-step-iconRemoved
          -timeline-step-icon-wrapperRemoved
          timeline-step-paragraphtimeline-step-descriptionRenamed
          -timeline-step-progress-bar-dashRemoved
          -timeline-step-progress-bar-wrapperRemoved
          timeline-step-root-Added
          timeline-step-solid-track-Added
          timeline-step-status-indicator-Added
          -timeline-step-top-wrapperRemoved
          -timeline-step-top-wrapper-leftRemoved

          Timeline Props​

          V2V1Status
          buttonbuttonUnchanged
          childrenchildrenUnchanged
          contentcontentUnchanged
          currentStepcurrentStepUnchanged
          footerfooterUnchanged
          headingWeighttitleWeightRenamed
          paragraphdescriptionRenamed
          typetypeUnchanged
          variantvariantUnchanged

          Timeline.Step Props​

          V2V1Status
          contentcontentUnchanged
          datedateUnchanged
          headingtitleRenamed
          -isDisabledRemoved
          paragraphdescriptionRenamed
          Table of Contents