Stepper

Indicador de pasos horizontal con estilo terminal. Muestra progreso con formato [1]──[2]──[3].

Stepper

Demo

[1] Login ── [2] Config ── [3] Done

[1] Login ── [2] Config ── [3] Done

[1] Login ── [2] Config ── [3] Done

<Stepper color="primary" :current="1" :steps="[{ label: 'Login' }, { label: 'Config' }, { label: 'Done' }]" />
<Stepper color="warning" :current="2" :steps="[{ label: 'Login' }, { label: 'Config' }, { label: 'Done' }]" />
<Stepper color="success" :current="3" :steps="[{ label: 'Login' }, { label: 'Config' }, { label: 'Done' }]" />

Props

steps

Lista de pasos con su etiqueta.

<Stepper :steps="[
  { label: 'Login' },
  { label: 'Config' },
  { label: 'Done' },
]" />

current

Paso actual (1-based). Determina qué paso está activo.

[1] Uno ── [2] Dos ── [3] Tres

<Stepper :current="2" :steps="steps" />

color

Color del paso activo.

[1] A ── [2] B ── [3] C

[1] A ── [2] B ── [3] C

[1] A ── [2] B ── [3] C

<Stepper color="primary" :current="2" :steps="[{ label: 'A' }, { label: 'B' }, { label: 'C' }]" />
<Stepper color="success" :current="2" :steps="[{ label: 'A' }, { label: 'B' }, { label: 'C' }]" />
<Stepper color="danger" :current="2" :steps="[{ label: 'A' }, { label: 'B' }, { label: 'C' }]" />

Tipos

StepItem

Campo	Tipo	Requerido	Descripción
label	string	✅	Texto del paso

API

Prop	Tipo	Default	Descripción
steps	StepItem[]	[]	Lista de pasos
current	number	1	Paso actual (1-based)
color	'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'	'primary'	Color del paso actual

Tokens usados

--font-mono, --text, --text-muted, --border, --color-*