Steps

Stepper with done / current / upcoming

Where someone is in a sequence — the header of a Stepper, or an order's status. The current step has aria-current="step".

Basic

1. Cart3 items
2. 2
   Shipping
3. 3
   Payment
4. 4
   Done

1. ✓
   Cart3 items
2. ✓
   Shipping
3. 3
   Payment

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessSteps } from "blessing-ui";
const step = ref(1);
const steps = [
  { label: "Cart", description: "3 items" },
  { label: "Shipping" },
  { label: "Payment" },
  { label: "Done" },
];
</script>

<template>
  <div class="col" style="max-width: 640px">
    <BlessSteps v-model="step" :steps clickable />
    <div class="row">
      <BlessButton size="sm" variant="outline" :disabled="step === 0" @click="step--"
        >Back</BlessButton
      >
      <BlessButton size="sm" :disabled="step === steps.length - 1" @click="step++"
        >Next</BlessButton
      >
    </div>
    <BlessSteps :model-value="2" :steps="steps.slice(0, 3)" orientation="vertical" />
  </div>
</template>

• clickable turns completed steps into buttons (@select); clickable="all" makes every other step one.
• orientation="vertical" stacks them with room for descriptions.

Usage

import { BlessSteps } from "blessing-ui";

API

Props

Name	Type	Default	Description
steps*	BlessStep[]	—
orientation	"horizontal" | "vertical"	"horizontal"
clickable	boolean | "all"	—	completed steps are buttons that emit select; "all" makes every step one
label	string	"Progress"
modelValue	number	0

Events

Name	Payload	Description
select	[index: number]
update:modelValue	[value: number]