Badge

Utilisez les badges pour les compteurs, les statuts courts et les metadonnees compactes.

Éditeur en direct

function BadgeExample() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge>New</Badge>
      <Badge variant="secondary">Featured</Badge>
      <Badge variant="tertiary">Pro</Badge>
      <Badge variant="success">En stock</Badge>
      <Badge variant="warning">Low stock</Badge>
      <Badge variant="danger">Sold out</Badge>
    </div>
  );
}

Résultat

Loading...

import { Badge } from "niom-parts";

<Badge variant="success" size="md">
  En stock
</Badge>;

Cas d'utilisation courants

Placez un badge dans d'autres controles pour afficher un compteur, ou associez-le a du texte pour presenter un statut compact.

Éditeur en direct

function BadgeUseCases() {
  return (
    <div className="flex flex-wrap items-center gap-5">
      <Button variant="outline" className="relative">
        Notifications
        <Badge variant="danger" className="absolute -right-0.4 -top-0.5">
          3
        </Badge>
      </Button>
      <div className="flex items-center gap-2 text-sm">
        Order #1042
        <Badge variant="success" size="md">
          Paid
        </Badge>
      </div>
      <Badge as="strong" variant="muted">
        Archived
      </Badge>
    </div>
  );
}

Résultat

Loading...

Proprietes

Prop	Type	Default
as	ElementType	"span"
variant	"primary" | "secondary" | "tertiary" | "muted" | "success" | "danger" | "warning"	"primary"
size	"sm" | "md"	"sm"
children	ReactNode	-
className	string	""