Documentação
Badge
Exibe um badge ou um componente que se parece com um badge.
Carregando…
"use client";
import { Badge } from "@blips/ui/components/badge";
export default function BadgeDemo() {
return <Badge>Badge</Badge>;
}
Instalacao
Uso
import { Badge } from "@blips/ui/components/badge"<Badge variant="default | outline | secondary | destructive">Badge</Badge>Exemplos
Variantes
Use a prop variant para alterar a variante do badge.
Carregando…
import { Badge } from "@blips/ui/components/badge";
export function BadgeVariants() {
return (
<div className="flex flex-wrap gap-2">
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="ghost">Ghost</Badge>
</div>
);
}
Com icone
Voce pode renderizar um icone dentro do badge. Use data-icon="inline-start" para renderizar o icone a esquerda e data-icon="inline-end" para renderiza-lo a direita.
Carregando…
import { Badge } from "@blips/ui/components/badge";
import { SealCheck, Bookmark } from "@phosphor-icons/react";
export function BadgeWithIconLeft() {
return (
<div className="flex flex-wrap gap-2">
<Badge variant="secondary">
<SealCheck data-icon="inline-start" />
Verified
</Badge>
<Badge variant="outline">
Bookmark
<Bookmark data-icon="inline-end" />
</Badge>
</div>
);
}
Com spinner
Voce pode renderizar um spinner dentro do badge. Lembre-se de adicionar a prop data-icon="inline-start" ou data-icon="inline-end" ao spinner.
Carregando…
import { Badge } from "@blips/ui/components/badge";
import { Spinner } from "@blips/ui/components/spinner";
export function BadgeWithSpinner() {
return (
<div className="flex flex-wrap gap-2">
<Badge variant="destructive">
<Spinner data-icon="inline-start" />
Deleting
</Badge>
<Badge variant="secondary">
Generating
<Spinner data-icon="inline-end" />
</Badge>
</div>
);
}
Link
Use a prop asChild para renderizar um link como um badge.
Carregando…
import { Badge } from "@blips/ui/components/badge";
import { ArrowUpRight } from "@phosphor-icons/react";
export function BadgeAsLink() {
return (
<Badge asChild>
<a href="#link">
Open Link <ArrowUpRight data-icon="inline-end" />
</a>
</Badge>
);
}
Cores personalizadas
Voce pode personalizar as cores de um badge adicionando classes como bg-green-50 dark:bg-green-800 ao componente Badge.
Carregando…
import { Badge } from "@blips/ui/components/badge";
export function BadgeCustomColors() {
return (
<div className="flex flex-wrap gap-2">
<Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
Blue
</Badge>
<Badge className="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">
Green
</Badge>
<Badge className="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">
Sky
</Badge>
<Badge className="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">
Purple
</Badge>
<Badge className="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">
Red
</Badge>
</div>
);
}
Referencia da API
Badge
O componente Badge exibe um badge ou um componente que se parece com um badge.