Button

The Button component is a versatile element for user interactions. nqui provides an enhanced Button with beautiful styling, multiple variants, and full accessibility support.

Installation

npm install @nqlib/nqui

Import

import { Button } from '@nqlib/nqui';

Basic Usage

import { Button } from '@nqlib/nqui';

export default function Example() {
  return <Button>Click me</Button>;
}

Variants

Buttons come in different variants to suit various use cases:

• default - Primary button with enhanced styling, gradients, and shadows
• destructive - For dangerous or destructive actions
• secondary - A secondary button for less prominent actions
• success - For positive actions
• warning - For warning actions
• info - For informational actions
• outline - A button with an outline style
• ghost - A minimal button style
• link - A text button that looks like a link

Sizes

Buttons come in four sizes:

• sm - Small button (h-9)
• default - Default size (h-10)
• lg - Large button (h-11)
• icon - Square icon button (h-10 w-10)

Examples

'use client';import { Button } from '@nqlib/nqui';export default function Example() {  return (    <div className="flex flex-wrap gap-2">      <Button variant="default">Default</Button>      <Button variant="destructive">Destructive</Button>      <Button variant="secondary">Secondary</Button>      <Button variant="success">Success</Button>      <Button variant="warning">Warning</Button>      <Button variant="info">Info</Button>      <Button variant="outline">Outline</Button>      <Button variant="ghost">Ghost</Button>      <Button variant="link">Link</Button>    </div>  );}

'use client';import { Button } from '@nqlib/nqui';import { Plus, Edit, Trash2 } from 'lucide-react';export default function Example() {  return (    <div className="flex gap-2">      <Button size="icon" variant="default">        <Plus />      </Button>      <Button size="icon" variant="outline">        <Edit />      </Button>      <Button size="icon" variant="destructive">        <Trash2 />      </Button>    </div>  );}

'use client';import { Button } from '@nqlib/nqui';import { Download, Heart } from 'lucide-react';export default function Example() {  return (    <div className="flex gap-2">      <Button>        <Download className="mr-2 h-4 w-4" />        Download      </Button>      <Button variant="outline">        <Heart className="mr-2 h-4 w-4" />        Favorite      </Button>    </div>  );}

'use client';import { useState } from 'react';import { Button } from '@nqlib/nqui';import { Loader2 } from 'lucide-react';export default function Example() {  const [loading, setLoading] = useState(false);  return (    <Button      onClick={() => {        setLoading(true);        setTimeout(() => setLoading(false), 2000);      }}      disabled={loading}    >      {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}      {loading ? 'Loading...' : 'Click to Load'}    </Button>  );}

'use client';import { Button } from '@nqlib/nqui';export default function Example() {  return (    <div className="flex gap-2">      <Button>Normal</Button>      <Button disabled>Disabled</Button>    </div>  );}

Props

The Button component accepts all standard HTML button attributes plus:

Advanced Usage

Enhanced vs Core Button

nqui exports an enhanced Button component by default, which includes:

• Enhanced styling with gradients, shadows, and borders
• Smooth transitions and animations
• Better focus and active states
• 3D button effects on enhanced variants

For the base shadcn Button (without enhancements), you can import CoreButton:

import { CoreButton } from '@nqlib/nqui';

The enhanced variants (default, destructive, secondary, success, warning, info) use the enhanced styling, while outline, ghost, and link variants fall back to the core button implementation.

With Next.js Link

import { Button } from '@nqlib/nqui';
import Link from 'next/link';

export default function Example() {
  return (
    <Button asChild>
      <Link href="/docs">Go to Docs</Link>
    </Button>
  );
}

Styling

Buttons use the following design tokens:

• Enhanced variants use CSS custom properties for gradients and shadows
• Focus ring: ring-ring with ring-offset-background
• Disabled: opacity-65 with cursor-not-allowed
• Active state: Scale transform and inset shadow

You can customize the appearance using Tailwind classes:

<Button className="bg-custom-color hover:bg-custom-color/90">
  Custom Button
</Button>

Accessibility

• Fully keyboard accessible
• Proper ARIA attributes
• Focus management with visible focus rings
• Screen reader support
• Disabled state properly handled

Best Practices

1. Use appropriate variants: Choose the variant that matches the action's importance
2. Provide loading states: Show feedback during async operations
3. Use icons wisely: Icons can enhance understanding but don't rely on them alone
4. Maintain consistency: Use the same variant for similar actions across your app
5. Consider disabled states: Always provide visual feedback for disabled buttons

Next Steps

• Learn about Badge component for status indicators
• Explore Form Components for form inputs
• Check out other Essential Components