Button

Installation

npx nuecrea-ui add button

Usage

import { Button } from '@/components/ui/button';

const variants = ['default', 'secondary', 'outline', 'ghost', 'destructive', 'link'] as const;
const sizes = ['sm', 'md', 'lg'] as const;

export default function ButtonStory() {
  return (
    <main className="grid gap-4">
      {variants.map((variant) => (
        <div key={variant} className="flex items-center gap-3">
          {sizes.map((size) => (
            <Button key={size} variant={variant} size={size}>
              {`${variant} ${size}`}
            </Button>
          ))}
          <Button variant={variant} disabled>
            disabled
          </Button>
          <Button variant={variant} loading>
            loading
          </Button>
        </div>
      ))}
      <div className="flex items-center gap-3">
        <Button size="icon" aria-label="Add">
          +
        </Button>
      </div>
    </main>
  );
}

API reference