Badge · Eyes

NovoAtivoErroPendenteNeutro

import { Badge } from "@vincisys/eyeson";

export function BadgeBasicDemo() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Badge color="blue-main">Novo</Badge>
			<Badge color="green-main">Ativo</Badge>
			<Badge color="red-main">Erro</Badge>
			<Badge color="orange-main">Pendente</Badge>
			<Badge color="neutral-main">Neutro</Badge>
		</div>
	);
}

Instalação

import { Badge } from '@vincisys/eyeson';

Uso

import { Badge } from '@vincisys/eyeson';

export function Example() {
return (
  <Badge color="green-main">Ativo</Badge>
);
}

Exemplos

Cores

A prop color aceita qualquer EdsSemanticColor (as mesmas cores usadas em Button e IconButton).

NovoAtivoErroPendenteNeutro

Visualizar

import { Badge } from "@vincisys/eyeson";

export function BadgeBasicDemo() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Badge color="blue-main">Novo</Badge>
			<Badge color="green-main">Ativo</Badge>
			<Badge color="red-main">Erro</Badge>
			<Badge color="orange-main">Pendente</Badge>
			<Badge color="neutral-main">Neutro</Badge>
		</div>
	);
}

Variantes

variant aceita solid, soft (padrão) e outline.

SolidSoftOutline

Visualizar

import { Badge } from "@vincisys/eyeson";

export function BadgeVariantsDemo() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Badge color="blue-main" variant="solid">
				Solid
			</Badge>
			<Badge color="blue-main" variant="soft">
				Soft
			</Badge>
			<Badge color="blue-main" variant="outline">
				Outline
			</Badge>
		</div>
	);
}

Tamanhos

size aceita sm e md (padrão).

PequenoMédio

Visualizar

import { Badge } from "@vincisys/eyeson";

export function BadgeSizesDemo() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Badge color="blue-main" size="sm">
				Pequeno
			</Badge>
			<Badge color="blue-main" size="md">
				Médio
			</Badge>
		</div>
	);
}

Ícone e indicador de status

Use icon para exibir um ícone antes do conteúdo, ou dot para um indicador circular de status (as duas props são mutuamente exclusivas — quando dot é true, o ícone não é renderizado).

DestaqueOnlineOffline

Visualizar

import { Badge } from "@vincisys/eyeson";
import { Star } from "lucide-react";

export function BadgeIconDotDemo() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Badge color="orange-main" icon={Star}>
				Destaque
			</Badge>
			<Badge color="green-main" dot>
				Online
			</Badge>
			<Badge color="red-main" dot>
				Offline
			</Badge>
		</div>
	);
}