Button

A flexible button component with multiple variants and sizes.

PREVIEW

INSTALLATION

bash

# Required
npm install @kennbalino/kui

# Optional — only if you want to use CVA, cn(), or lucide icons directly
npm install class-variance-authority clsx tailwind-merge lucide-react

USAGE

tsx

import { Button } from "@kennbalino/kui";

// Variants
<Button variant="solid">Solid</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="muted">Muted</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// Disabled
<Button disabled>Disabled</Button>

PROPS

Prop	Type	Default	Description
variant	solid \| ghost \| danger \| muted	solid	Controls the visual style of the button.
size	sm \| md \| lg	md	Controls the size of the button.
disabled	boolean	false	Disables the button and prevents interaction.
onClick	() => void	—	Callback fired when the button is clicked.
type	button \| submit \| reset	button	HTML button type attribute.
className	string	—	Additional CSS classes to apply.
children*	ReactNode	—	Content rendered inside the button.