Steps

Indicador de progreso visual mostrando pasos secuenciales.

Importar

import { Steps } from 'asterui'

Ejemplos

Steps básicos

Progresión de pasos horizontal.

</>

• Register
• Choose plan
• Purchase
• Receive Product

import { Steps } from 'asterui'

function App() {
  return (
      <Steps>
        <Steps.Step color="primary">Register</Steps.Step>
        <Steps.Step color="primary">Choose plan</Steps.Step>
        <Steps.Step>Purchase</Steps.Step>
        <Steps.Step>Receive Product</Steps.Step>
      </Steps>
    )
}

export default App

Steps verticales

Pasos en orientación vertical.

</>

• Register
• Choose plan
• Purchase
• Receive Product

import { Steps } from 'asterui'

function App() {
  return (
      <Steps direction="vertical">
        <Steps.Step color="primary">Register</Steps.Step>
        <Steps.Step color="primary">Choose plan</Steps.Step>
        <Steps.Step>Purchase</Steps.Step>
        <Steps.Step>Receive Product</Steps.Step>
      </Steps>
    )
}

export default App

Diferentes colores

Pasos con varios colores semánticos.

</>

• Research
• Design
• Develop
• Deploy

import { Steps } from 'asterui'

function App() {
  return (
      <Steps>
        <Steps.Step color="info">Research</Steps.Step>
        <Steps.Step color="info">Design</Steps.Step>
        <Steps.Step color="warning">Develop</Steps.Step>
        <Steps.Step color="success">Deploy</Steps.Step>
      </Steps>
    )
}

export default App

Contenido personalizado

Indicadores personalizados usando dataContent.

</>

• Step 1
• Step 2
• Step 3
• Step 4

import { Steps } from 'asterui'

function App() {
  return (
      <Steps>
        <Steps.Step color="primary" dataContent="?">Step 1</Steps.Step>
        <Steps.Step color="primary" dataContent="!">Step 2</Steps.Step>
        <Steps.Step dataContent="✓">Step 3</Steps.Step>
        <Steps.Step dataContent="✕">Step 4</Steps.Step>
      </Steps>
    )
}

export default App

Diseño responsivo

Vertical en móvil, horizontal en escritorio.

</>

• Register
• Choose plan
• Purchase
• Receive Product

import { Steps } from 'asterui'

function App() {
  return (
      <Steps className="steps-vertical lg:steps-horizontal">
        <Steps.Step color="primary">Register</Steps.Step>
        <Steps.Step color="primary">Choose plan</Steps.Step>
        <Steps.Step>Purchase</Steps.Step>
        <Steps.Step>Receive Product</Steps.Step>
      </Steps>
    )
}

export default App

Paso actual controlado

Usa la prop current para controlar el progreso del paso.

</>

• Register
• Verify Email
• Setup Profile
• Complete

PreviousNext

import { Steps, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  return (
      <div className="space-y-4">
        <Steps current={current}>
          <Steps.Step>Register</Steps.Step>
          <Steps.Step>Verify Email</Steps.Step>
          <Steps.Step>Setup Profile</Steps.Step>
          <Steps.Step>Complete</Steps.Step>
        </Steps>
        <div className="flex gap-2">
          <Button size="sm" onClick={() => setCurrent(Math.max(0, current - 1))} disabled={current === 0}>
            Previous
          </Button>
          <Button size="sm" color="primary" onClick={() => setCurrent(Math.min(3, current + 1))} disabled={current === 3}>
            Next
          </Button>
        </div>
      </div>
    )
}

export default App

Patrón basado en datos

Usa la prop items para pasos basados en datos con navegación por clic.

</>

• Cart
• Address
• Payment
• Confirm

import { Steps, notification } from 'asterui'
import { useState } from 'react'

function App() {
  const [current, setCurrent] = useState(1);
  
  const items = [
    { key: 'cart', title: 'Cart' },
    { key: 'address', title: 'Address' },
    { key: 'payment', title: 'Payment' },
    { key: 'confirm', title: 'Confirm' },
  ];
  
  return (
      <Steps
        items={items}
        current={current}
        onChange={(step) => {
          setCurrent(step);
          notification.info({ message: `Navigated to step ${step + 1}` });
        }}
      />
    )
}

export default App

Con iconos

Pasos con iconos personalizados.

</>

• Order Placed
• Processing
• Payment
• Delivery

import { Steps } from 'asterui'
import { CheckIcon, DocumentTextIcon, CreditCardIcon, TruckIcon } from '@aster-ui/icons'

function App() {
  return (
      <Steps>
        <Steps.Step color="primary" icon={<CheckIcon size="sm" />}>
          Order Placed
        </Steps.Step>
        <Steps.Step color="primary" icon={<DocumentTextIcon size="sm" />}>
          Processing
        </Steps.Step>
        <Steps.Step icon={<CreditCardIcon size="sm" />}>
          Payment
        </Steps.Step>
        <Steps.Step icon={<TruckIcon size="sm" />}>
          Delivery
        </Steps.Step>
      </Steps>
    )
}

export default App

API

Steps

Propiedad	Descripción	Tipo	Predeterminado
children	Elementos de paso (patrón compuesto)	React.ReactNode	-
items	Elementos de paso (patrón basado en datos)	StepItem[]	-
current	Índice del paso actual (basado en 0)	number	-
direction	Dirección del diseño	'horizontal' | 'vertical'	'horizontal'
vertical	Diseño vertical (obsoleto, usa direction)	boolean	false
onChange	Callback cuando se hace clic en un paso	(current: number) => void	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

StepItem (para prop items)

Propiedad	Descripción	Tipo	Predeterminado
key	Identificador único	string	-
title	Título del paso	React.ReactNode	-
description	Descripción del paso	React.ReactNode	-
icon	Icono del paso	React.ReactNode	-
color	Color del paso	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
disabled	Si el paso está deshabilitado	boolean	false
data-testid	ID de prueba para pruebas	string	-

Steps.Step (patrón compuesto)

Propiedad	Descripción	Tipo	Predeterminado
children	Contenido del paso	React.ReactNode	-
title	Título del paso (alternativa a children)	React.ReactNode	-
description	Descripción del paso	React.ReactNode	-
icon	Icono del paso	React.ReactNode	-
color	Color del paso	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
dataContent	Contenido personalizado para indicador de paso	string	-
disabled	Si el paso está deshabilitado	boolean	false
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

Consejos de uso:

• Usa la prop current para controlar qué paso está activo
• Los pasos antes de current se marcan automáticamente como completados
• Usa onChange para habilitar el clic en pasos para navegación
• Usa clases responsivas para diseños amigables para móviles