Badge

Ação e status

Rótulo de categoria ou tipo. Para o estado de um registro (ativo, pendente), use Status.

Substitui no Brain:ds Badge (quadrado)partners badge (pílula)ui badge (shadcn)

Tons

RascunhoComercialNovoAtivoPendenteBloqueadoExpert

import { Badge } from "@paytime/ui";

export default function Example() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge>Rascunho</Badge>
      <Badge tone="brand">Comercial</Badge>
      <Badge tone="info">Novo</Badge>
      <Badge tone="success">Ativo</Badge>
      <Badge tone="warning">Pendente</Badge>
      <Badge tone="error">Bloqueado</Badge>
      <Badge tone="highlight">Expert</Badge>
    </div>
  );
}

Formas, tamanhos e variantes

PílulaPequenoCheioContorno

import { Badge } from "@paytime/ui";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge tone="brand" shape="pill">Pílula</Badge>
      <Badge tone="info" size="sm">Pequeno</Badge>
      <Badge tone="brand" variant="solid">Cheio</Badge>
      <Badge tone="success" variant="outline">Contorno</Badge>
    </div>
  );
}