Semantic UI React  1.0.0
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypes
Elements
ButtonContainerDividerFlagIconHeaderImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchSidebarStickyTabTransition
Behaviors
Visibility
Addons
ConfirmMount NodePaginationPortalRadioResponsiveSelectText AreaTransitionable Portal

Step
A step shows the completion status of an activity in a series of activities.

src/elements/Step/Step.js
Semantic UI Step Docs
StepStep.ContentStep.DescriptionStep.GroupStep.Title

Types

Step

A single step.

You can do the same using shorthands.

Groups

Steps

A set of steps.

Responsive Element
Steps will automatically stack on mobile. To make steps automatically stack for tablet use the stackable='tablet' variation.

You can do the same using shorthands.

Ordered

A step can show a ordered sequence of steps.

Vertical

A step can be displayed stacked vertically.

Content

Description

A step can contain a description.

You can do the same using shorthands.

Icon

A step can contain an icon.

You can do the same using shorthands.

Link

A step can link.

States

Active

A step can be highlighted as active.

Completed

A step can show that a user has completed it.

A step can show that a user has completed it when its group is ordered.

Disabled

A step can show that it cannot be selected.

Variations

Stackable

A step can stack vertically only on smaller screens.

Unstackable2.2.11

A step can prevent itself from stacking on mobile.

Fluid

A fluid step takes up the width of its container.

Attached

Steps can be attached to other elements.

Evenly Divided

Steps can be divided evenly inside their parent.

Size

Steps can have different sizes.

This is the bottom