Componentes

Badge

Rótulos curtos de status, categoria ou contagem.

Ações e indicadores

Carregando demonstração…

Código da demo
"use client";

import { Badge } from "@/components/ui/badge";

export function Demo() {
  return (
    <div className="flex flex-wrap gap-fe-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="ghost">Ghost</Badge>
    </div>
  );
}

Use

  • Rótulo curto de estado ou categoria, sempre com texto.
  • StatusBadge para status: casa de tom mais texto.

Não use

  • Não use como botão.
  • Não use para frase ou número grande: use Stat.
Acessibilidade
Texto legível; não use só cor para significado.
Importar
import { Badge } from "@financeequity/ui/badge"

Neste repositório:

import { Badge } from "@/components/ui/badge"