button
Interactive button with ASCII dither
Corebutton.css
Installation
$
npx skeehn add buttonPreview
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'solid' | 'dither' | 'outline' | 'ghost' | 'inverted' | 'ascii' | 'pixel' | — | Visual style variant |
| size | 'sm' | 'lg' | 'xl' | — | Size preset |
| loading | boolean | false | Show loading animation and disable interaction |
| disabled | boolean | false | Disable interaction |
| className | string | — | Additional CSS class names |
Usage
button.tsx
1import { Button } from '@skeehn/react';23export function MyComponent() {4 return (5 <div className="flex gap-3">6 <Button variant="solid">Solid</Button>7 <Button variant="dither">Dither</Button>8 <Button variant="outline">Outline</Button>9 <Button variant="ghost">Ghost</Button>10 <Button variant="pixel">Pixel</Button>11 <Button variant="dither" loading>Loading</Button>12 </div>13 );14}