Vox Mente
Navegação

Componentes

Funnel Step

beta

Etapa de funil comercial. A graduação de tom é o que comunica em que ponto a etapa está — navy estrutura, purple decisão, teal conclusão.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/funnel-step

Playground
Proposta enviada4122% dos qualificados
<FunnelStep
  label="Proposta enviada"
  value="41"
  hint="22% dos qualificados"
/>

Uso

Uma etapa de funil comercial: rótulo, valor e uma dica opcional abaixo.
Leads184

Funil completo

Os tons seguem a semântica de marca, não uma escala livre: navy nas etapas estruturais, purple na decisão, teal na conclusão. É a graduação que comunica em que ponto o funil está — não use os tons como decoração isolada.
Leads184
Qualificados96
Proposta enviada41
Convertido17

Com dica

`hint` explica o número sem precisar de outro cartão ao lado — uma taxa de conversão, um prazo médio.
Convertido179,2% dos leads do mês

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

FunnelStep

PropTipoPadrão
hintstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
label*string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
tone"default" | "success" | "highlight" | null"default"
value*string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—

Também aceita as props de React, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css