IconButton · Eyes

Visualizar

import { IconButton } from "@vincisys/eyeson";
import { Pencil, Plus, Trash } from "lucide-react";

export function IconButtonBasicDemo() {
	return (
		<div className="flex items-center gap-2">
			<IconButton icon={Plus} label="Adicionar" variant="solid" />
			<IconButton icon={Pencil} label="Editar" variant="outline" />
			<IconButton
				icon={Trash}
				label="Excluir"
				variant="ghost"
				color="red-main"
			/>
		</div>
	);
}

Instalação

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

Uso

import { IconButton } from '@vincisys/eyeson';
import { Trash } from 'lucide-react';

export function Example() {
return <IconButton icon={Trash} label="Excluir" variant="ghost" color="red-main" />;
}

Exemplos

Variantes

Visualizar

import { IconButton } from "@vincisys/eyeson";
import { Pencil, Plus, Trash } from "lucide-react";

export function IconButtonBasicDemo() {
	return (
		<div className="flex items-center gap-2">
			<IconButton icon={Plus} label="Adicionar" variant="solid" />
			<IconButton icon={Pencil} label="Editar" variant="outline" />
			<IconButton
				icon={Trash}
				label="Excluir"
				variant="ghost"
				color="red-main"
			/>
		</div>
	);
}

Tamanhos

Visualizar

import { IconButton } from "@vincisys/eyeson";
import { Plus } from "lucide-react";

export function IconButtonSizesDemo() {
	return (
		<div className="flex items-center gap-2">
			<IconButton icon={Plus} label="Adicionar" size="sm" />
			<IconButton icon={Plus} label="Adicionar" size="md" />
			<IconButton icon={Plus} label="Adicionar" size="lg" />
		</div>
	);
}

Visualizar

import { IconButton } from "@vincisys/eyeson";
import { Trash } from "lucide-react";

export function IconButtonTooltipDemo() {
	return (
		<div className="flex items-center gap-2">
			<IconButton
				icon={Trash}
				label="Excluir"
				variant="ghost"
				color="red-main"
				tooltip="Excluir item"
			/>
		</div>
	);
}

Cor no hover

Visualizar

import { IconButton } from "@vincisys/eyeson";
import { Check } from "lucide-react";

export function IconButtonHoverColorDemo() {
	return (
		<div className="flex items-center gap-2">
			<IconButton
				icon={Check}
				label="Confirmar"
				variant="outline"
				color="neutral-main"
				hoverColor="green-main"
				tooltip="Confirmar"
			/>
		</div>
	);
}