Button Component

The Button component is one of the most fundamental components in NebulaUI. It provides multiple variants, sizes, and states for different use cases.

Basic Usage

import { Button } from 'nebula-ui';
 
export default function Example() {
  return (
    <div className="flex gap-4">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
    </div>
  );
}

Variants

The Button component supports several variants:

primary: Main action button (black/white)
secondary: Secondary action button
outline: Outlined button with border
ghost: Minimal button with no background
destructive: For destructive actions (red)

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Delete</Button>

Sizes

Buttons come in four sizes:

sm: Small button
md: Medium button (default)
lg: Large button
xl: Extra large button

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

States

Loading State

Show a loading spinner while an action is in progress:

<Button isLoading>Loading...</Button>

Disabled State

Disable the button to prevent interactions:

<Button disabled>Disabled</Button>

Full Width

Make the button span the full width of its container:

<Button fullWidth>Full Width Button</Button>

With Icons

Add icons to your buttons:

import { Button } from 'nebula-ui';
import { Download, Upload } from 'lucide-react';
 
<Button leftIcon={<Download />}>Download</Button>
<Button rightIcon={<Upload />}>Upload</Button>
<Button leftIcon={<Download />} rightIcon={<Upload />}>
  Both Icons
</Button>

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive'`	`'primary'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the button
`isLoading`	`boolean`	`false`	Shows loading spinner
`disabled`	`boolean`	`false`	Disables the button
`fullWidth`	`boolean`	`false`	Makes button full width
`leftIcon`	`ReactNode`	-	Icon on the left
`rightIcon`	`ReactNode`	-	Icon on the right
`children`	`ReactNode`	-	Button content

Accessibility

The Button component is fully accessible:

Keyboard navigation support (Enter/Space)
Proper ARIA attributes
Focus management
Screen reader support

Best Practices

Use primary variant for the main action on a page
Use destructive variant sparingly for dangerous actions
Provide loading states for async operations
Use appropriate sizes based on context (larger for CTAs)
Include icons when they add clarity to the action

Examples

Form Submission

<Button 
  variant="primary" 
  size="lg" 
  isLoading={isSubmitting}
  fullWidth
>
  Submit Form
</Button>

Action Group

<div className="flex gap-2">
  <Button variant="primary">Save</Button>
  <Button variant="outline">Cancel</Button>
  <Button variant="destructive">Delete</Button>
</div>