Steps

Indicador visual de progresso mostrando etapas sequenciais.

Importação

import { Steps } from 'asterui'

Exemplos

Steps Básico

Progressão de etapas 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 Vertical

Etapas em orientação 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 Cores

Etapas com várias cores semânticas.

</>

• 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

Conteúdo 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

Layout Responsivo

Vertical no mobile, horizontal no desktop.

</>

• 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

Etapa Atual Controlada

Use a prop current para controlar o progresso da etapa.

</>

• 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

Padrão Baseado em Dados

Use a prop items para etapas baseadas em dados com navegação por clique.

</>

• 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

Com Ícones

Etapas com ícones 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

Propriedade	Descrição	Tipo	Padrão
children	Itens de etapa (padrão composto)	React.ReactNode	-
items	Itens de etapa (padrão baseado em dados)	StepItem[]	-
current	Índice da etapa atual (base 0)	number	-
direction	Direção do layout	'horizontal' | 'vertical'	'horizontal'
vertical	Layout vertical (depreciado, use direction)	boolean	false
onChange	Callback quando etapa é clicada	(current: number) => void	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

StepItem (para prop items)

Propriedade	Descrição	Tipo	Padrão
key	Identificador único	string	-
title	Título da etapa	React.ReactNode	-
description	Descrição da etapa	React.ReactNode	-
icon	Ícone da etapa	React.ReactNode	-
color	Cor da etapa	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
disabled	Se a etapa está desabilitada	boolean	false
data-testid	ID de teste para testes	string	-

Steps.Step (padrão composto)

Propriedade	Descrição	Tipo	Padrão
children	Conteúdo da etapa	React.ReactNode	-
title	Título da etapa (alternativa a children)	React.ReactNode	-
description	Descrição da etapa	React.ReactNode	-
icon	Ícone da etapa	React.ReactNode	-
color	Cor da etapa	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
dataContent	Conteúdo personalizado para indicador da etapa	string	-
disabled	Se a etapa está desabilitada	boolean	false
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Acessibilidade

Dicas de Uso:

• Use a prop current para controlar qual etapa está ativa
• Etapas antes de current são automaticamente marcadas como concluídas
• Use onChange para habilitar clique nas etapas para navegação
• Use classes responsivas para layouts amigáveis para mobile