Step

<wa-step>

Experimental

Steps represent a single stage inside a <wa-stepper>, showing its position, label, and status.

This component must be used as a child of <wa-stepper>. Please see the Stepper docs to see examples of this component in action.

  Cart
  
    Shipping
    Enter your address
  
  Payment

<wa-stepper active="shipping">
  <wa-step name="cart" completed>Cart</wa-step>
  <wa-step name="shipping" data-anatomy-subject="true">
    Shipping
    <span slot="description">Enter your address</span>
  </wa-step>
  <wa-step name="payment">Payment</wa-step>
</wa-stepper>

API

Link to This Section

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/[email protected]/components/step/step.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/step/step.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/step/step.js';

To import this component for React 18 or below, use the following code:

import WaStep from '@awesome.me/webawesome/dist/react/step/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	The step's label.
`description`	Optional text shown under the label.
`icon`	An element, such as `<wa-icon>`, that replaces the step number, checkmark, or loading indicator.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`active` `active`	Draws the step as the stepper's current step. The parent `<wa-stepper>` sets this from its own `active` attribute, so you only need to set it yourself for SSR. Type `boolean` Default `false`
`attention` `attention`	Adds an animation to the step's marker to draw attention to it, e.g. the step the user should do next. Type `'none' \| 'pulse' \| 'bounce'` Default `'none'`
`completed` `completed`	Marks the step done. Shows a checkmark instead of the step number. Type `boolean` Default `false`
`disabled` `disabled`	Makes the step non-interactive. It can't be clicked or reached with `next()`/`goTo()`, and it renders as a disabled button when the stepper is `clickable`. Type `boolean` Default `false`
`loading` `loading`	Shows a loading indicator instead of the step number, e.g. while an async transition is in progress. Type `boolean` Default `false`
`name` `name`	Identifies the step. Matched against the stepper's `active` attribute and used in events. Type `string` Default `''`
`variant` `variant`	Colors the step's marker with a semantic color. Upcoming `brand` steps keep a neutral outline so a default stepper reads quietly. The color is cosmetic; pair it with an icon in the `icon` slot and a clear label when a step needs to read as failed or flagged. Type `'neutral' \| 'brand' \| 'success' \| 'warning' \| 'danger'` Default `'brand'`
`withDescription` `with-description`	Only required for SSR. Set to `true` if you're slotting in a `description` element, so the server-rendered markup includes it before the component hydrates on the client. Type `boolean` Default `false`

CSS Custom Properties

Link to This Section

Learn more about CSS custom properties.

Name	Description
`--pulse-color`	The color of the marker's pulse effect when using `attention="pulse"`. Defaults to the step's accent color.

Custom States

Link to This Section

Learn more about custom states.

Name	Description	CSS selector
`active`	Applied when this is the parent stepper's current step.	`:state(active)`
`clickable`	Applied by the parent stepper when its `clickable` attribute is set, allowing this step to be clicked or activated (Enter/Space) directly.	`:state(clickable)`
`completed`	Mirrors the `completed` attribute.	`:state(completed)`
`disabled`	Mirrors the `disabled` attribute.	`:state(disabled)`
`loading`	Mirrors the `loading` attribute.	`:state(loading)`
`locked`	Applied by the parent stepper when `linear` is set and this step can't be reached yet, i.e. it comes after the first incomplete step.	`:state(locked)`

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`button`	The `<button>` wrapping the marker and content. Only rendered when the parent stepper is `clickable`; otherwise the same wrapper is a plain, non-focusable element.	`::part(button)`
`connector`	The line connecting this step to its neighbors. Each step draws the half leading in and the half leading out, and both carry this part name.	`::part(connector)`
`content`	The wrapper around the label, status text, and description.	`::part(content)`
`description`	The step's description.	`::part(description)`
`label`	The step's label.	`::part(label)`
`marker`	The circular marker that shows the step's number, checkmark, or loading indicator.	`::part(marker)`
`spinner`	The spinner shown in the marker while the step is `loading`.	`::part(spinner)`
`status`	Visually hidden text that tells assistive technology whether the step is completed, not completed, or locked.	`::part(status)`
`step`	The component's outer wrapper.	`::part(step)`

Dependencies

Link to This Section

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Need a hand?

Report a bug

Ask for help

Step

API

Importing

Slots

Attributes & Properties

CSS Custom Properties

Custom States

CSS Parts

Dependencies

Quick Links

Recent Searches

Step

API

Importing

Slots

Attributes & Properties

CSS Custom Properties

Custom States

CSS Parts

Dependencies

Quick Links

Recent Searches

We Have Cookies…