Skip to content
On this page

Steps

Responsive horizontal process steps

Base

Show code

Variants

Warning

Info

Success

Show code

Vertical

Show code

Class props


How does Class props inspector work?
Class propDescriptionPropsSuffixes
animatedClassClass of Steps component when animation gets triggered.animated
β–· itemClassClass of the content item.
β–· itemHeaderActiveClassClass of the nav item when active.
β–· itemHeaderClassClass of the nav item.
πŸ” Classes applied have a higher specificity than expected when positionClass is applied
β–· itemHeaderPreviousClassClass of the nav item behind the active one.
β–· itemHeaderVariantClassClass of the nav item with variant (default value by parent steps component).variantprimary
info
warning
danger
mobileClassClass of steps component when on mobile.
πŸ‘‰ Switch to mobile view to see it in action!
positionClassClass of the Steps component when is vertical and its position changes.position
vertical
bottom
left
right
rootClassRoot class of the element.
sizeClassSize of the steps.sizesmall
medium
large
stepContentClassClass of the Steps component content.
πŸ” Classes applied have a higher specificity than expected when positionClass is applied
stepContentTransitioningClassClass of the Steps component content when transition is happening.
πŸ‘‰ Click on a marker to see it in action
stepDividerClassClass of the Steps component dividers.
πŸ” Classes applied have a higher specificity than expected when mobileClass or itemHeaderActiveClass or itemHeaderPreviousClass or positionClass is applied
stepLinkClassClass of the Steps component link.
πŸ” Classes applied have a higher specificity than expected when itemHeaderActiveClass is applied
stepLinkClickableClassClass of the Steps component link when clickable.clickable
stepLinkLabelClassClass of the Step component link label.
stepLinkLabelPositionClassClass of the Step component link label when positioned.labelPositionbottom
right
left
stepMarkerClassClass of the Steps component marker.
πŸ” Classes applied have a higher specificity than expected when itemHeaderActiveClass or itemHeaderPreviousClass is applied
stepMarkerRoundedClassClass of the Steps markers trigger when are rounded.rounded
stepNavigationClassClass of the Steps component navigation element.
πŸ” Classes applied have a higher specificity than expected when positionClass is applied
stepsClassClass of the steps container.
πŸ” Classes applied have a higher specificity than expected when positionClass is applied
verticalClassClass of the tooltip trigger.vertical


Props

Prop nameDescriptionTypeValuesDefault
animatedStep navigation is animatedboolean-true
ariaNextLabelstring-
ariaPreviousLabelstring-
hasNavigationNext and previous buttons below the component. You can use this property if you want to use your own custom navigation items.boolean-true
iconNextIcon to use for navigation buttonstring-
From config

steps: {
Β Β iconNext: 'chevron-right'
}
iconPackIcon pack to use for the navigationstringmdi, fa, fas and any other custom icon pack
iconPrevIcon to use for navigation buttonstring-
From config

steps: {
Β Β iconPrev: 'chevron-left'
}
labelPositionPosition of the marker label, optionalstringbottom, right, left'bottom'
mobileBreakpointMobile breakpoint as max-width valuestring-
overrideboolean-
roundedRounded step markersboolean-true

Slots

NameDescriptionBindings
default
navigation

Step Item

Props

Prop nameDescriptionTypeValuesDefault
clickableItem can be used directly to navigate. If undefined, previous steps are clickable while the others are notboolean-undefined
overrideboolean-
stepStep marker content (when there is no icon)string|number-
variantDefault style for the step, optional This will override parent type. Could be used to set a completed step to "success" for examplestring|object-

Style

πŸ“„ Full scss file

CSS VariableSASS VariableDefault
--oruga-steps-details-background-color$steps-details-background-colorhsl(0, 0%, 100%)
--oruga-steps-details-padding$steps-details-padding.2em
--oruga-steps-marker-background$steps-marker-background$grey-light
--oruga-steps-marker-color$steps-marker-color$primary-invert
--oruga-steps-marker-border$steps-marker-border.2em solid #fff
--oruga-steps-marker-font-weight$steps-marker-font-weight700
--oruga-steps-marker-rounded-border-radius$steps-marker-rounded-border-radius$base-rounded-border-radius
--oruga-steps-color$steps-color$grey-lighter
--oruga-steps-previous-color$steps-previous-color$primary
--oruga-steps-active-color$steps-active-color$primary
--oruga-steps-divider-height$steps-divider-height.2em
--oruga-steps-vertical-padding$steps-vertical-padding1em 0
--oruga-steps-item-line-height$steps-item-line-height$base-line-height
--oruga-steps-link-color$steps-link-colorhsl(0, 0%, 29%)
--oruga-steps-content-padding$steps-content-padding1rem
--oruga-steps-font-size$steps-font-size$base-font-size
--oruga-steps-details-title-font-weight$steps-details-title-font-weight600

Released under the MIT License.