Semantic UI React  3.0.0-beta.2
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypesMigration guide to v3
Elements
ButtonContainerFlagHeaderDividerImageIconLabelInputListLoaderPlaceholderRailRevealSegmentStep
Collections
FormGridMessageMenuTableBreadcrumb
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerEmbedModalDropdownPopupProgressRatingSearchSidebarStickyTransitionTab
Addons
PaginationConfirmPortalRadioSelectText 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
Blazing deployments by Vercel.