StatusBadge
Componente versátil para exibir status com ícones e cores diferenciadas. Inclui suporte para diferentes contextos: tarefas, processos, veículos e aplicações gerais.
Status de Tarefas e Processos
Status para acompanhamento de tarefas e processos:
EnviadoEm análiseConcluídoEm andamentoFinalizadoCancelado
Status de Tarefas
import { StatusBadge } from "@/registry/ui/StatusBadge";
<StatusBadge status="ENVIADO" />
<StatusBadge status="EM ANÁLISE" />
<StatusBadge status="CONCLUÍDO" />
<StatusBadge status="EM ANDAMENTO" />
<StatusBadge status="FINALIZADO" />
<StatusBadge status="CANCELADO" />Status de Veículos
Status para controle operacional de veículos:
RodandoParado
Status de Veículos
<StatusBadge status="RODANDO" />
<StatusBadge status="PARADO" />Status Gerais
Status genéricos para diferentes tipos de aplicações:
AtivoInativoPendenteAprovadoRejeitado
Status Gerais
<StatusBadge status="ATIVO" />
<StatusBadge status="INATIVO" />
<StatusBadge status="PENDENTE" />
<StatusBadge status="APROVADO" />
<StatusBadge status="REJEITADO" />Variações de Tamanho
O componente suporta três tamanhos diferentes:
Size: sm (pequeno)
AtivoEm análiseFinalizadoCancelado
Size: md (médio - padrão)
AtivoEm análiseFinalizadoCancelado
Size: lg (grande)
AtivoEm análiseFinalizadoCancelado
Diferentes Tamanhos
<StatusBadge status="ATIVO" size="sm" />
<StatusBadge status="EM ANÁLISE" size="md" />
<StatusBadge status="FINALIZADO" size="lg" />Status Personalizado
Status não reconhecidos são exibidos com formatação padrão:
Custom_statusOutro statusTeste
Status Personalizado
<StatusBadge status="CUSTOM_STATUS" />
<StatusBadge status="outro status" />
<StatusBadge status="TESTE" />Suporte a Temas
Todos os status se adaptam automaticamente aos temas claro, escuro e contraste:
Tema Claro
AprovadoPendenteRejeitado
Tema Escuro
AprovadoPendenteRejeitado
Interface e Props
StatusBadge Interface
interface StatusBadgeProps {
status: string;
size?: "sm" | "md" | "lg";
className?: string;
}Props Disponíveis
status- String do status (obrigatório)size- Tamanho: "sm", "md" ou "lg" (padrão: "md")className- Classes CSS adicionais (opcional)
Características
- • Ícones apropriados para cada status
- • Cores diferenciadas por categoria
- • Tooltips explicativos
- • Suporte completo a temas
- • Status personalizados aceitos
- • Layout responsivo