Button

Variants

The Button component comes with several style variants:

• default: Primary button style
• light: Light background with primary text
• destructive: Red background for destructive actions
• outline: Border with transparent background
• secondary: Secondary color scheme
• ghost: Minimal hover effect
• link: Text link style
• combobox: Special style for comboboxes
• neoBrutalism: Bold neo-brutalism design

Available Sizes

• default: Standard button size (h-10 with balanced padding)
• heightless: Flexible height with consistent horizontal padding
• xs: Extra small buttons for compact interfaces
• sm: Small buttons for secondary actions
• lg: Large buttons for primary actions
• xl: Extra large buttons for high-emphasis actions
• icon: Square buttons for icon-only content
• smallIcon: Compact square buttons for small icons

Features

Loading State

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

The loading state automatically shows:

• Dots pulse animation for normal buttons
• Spinner animation for icon buttons
• Appropriate colors based on variant

Centering

<Button centered={false}>Left Aligned</Button>

By default buttons center their content. Set centered={false} to align left.

Usage

import { Button } from "@/components/naseem-ui/elements/button"

export default function Example() {
  return (
    <div className="flex flex-col gap-4">
      <Button variant="default">Default</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Outline</Button>
      <Button isLoading>Loading</Button>
    </div>
  )
}

Props