Button · Eyes

Visualizar

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

export function ButtonBasicDemo() {
	return <Button text="Button" />;
}

Instalação

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

Uso

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

export function Example() {
return <Button text="Salvar" variant="solid" />;
}

Exemplos

Variantes

Visualizar

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

export function ButtonVariantsDemo() {
	return (
		<div className="flex flex-wrap items-center gap-2">
			<Button text="Solid" />
			<Button text="Outline" variant="outline" />
			<Button text="Ghost" variant="ghost" />
			<Button text="Link" variant="link" />
		</div>
	);
}

Tamanhos

Visualizar

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

export function ButtonSizesDemo() {
	return (
		<div className="flex flex-wrap items-center gap-3">
			<Button text="Small" size="sm" />
			<Button text="Medium" size="md" />
			<Button text="Large" size="lg" />
		</div>
	);
}

Cores

Visualizar

import { Button, COLORS } from "@vincisys/eyeson";

export function ButtonColorsDemo() {
	return (
		<div className="flex max-w-3xl flex-wrap gap-2">
			{COLORS.map((color) => (
				<Button key={color} color={color} text={color} size="sm" />
			))}
		</div>
	);
}

Com ícone

Visualizar

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

export function ButtonWithIconDemo() {
	return <Button text="Adicionar" icon={Plus} />;
}

Carregando

Visualizar

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

export function ButtonLoadingDemo() {
	return <Button text="Carregando" isLoading />;
}

Desabilitado

Visualizar

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

export function ButtonDisabledDemo() {
	return <Button text="Desabilitado" disabled />;
}