Button Variant

This is demo and docs for button variant

Default Button variant

Default button variant with rounded sm and fullwidht - used in login page

Destructive and Default Variant size sm

Used in action button to submit and cancel

Secondar Button Variant - Full Width

Button variant used in while sending docket or submitting docket

Custom Button Component

Button variant used for approving, rejecting and dismiss.

Outline Primary Button Variants

Button variant used in schedular page to clone, export csv and many more...

Outline Secondary Button Variant

Secondary outline variant

Default Outline Button Varinat

Default Outline button varinat

Tertiary Outline Button Variants

Tertiary button variant

Secondary Button Variants

Secondary button variant

Customizable Deafult Button Variants

Customizable default button variant

Small Default Button Variants

Small default button variants

Button Component Documentation

The Button component is a highly flexible, accessible, and themeable button built with React, TailwindCSS, and Class Variance Authority (CVA). It supports multiple variants, sizes, icons, loading states, and can be used as a standard button or a wrapper for other components (asChild).

Basic Usage

<Button>Click Me</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive" size="lg">Delete</Button>

Props

The Button component accepts all native <button> props and additional variants:

Prop	Type	Default	Description
asChild	boolean	false	Renders a `Slot` instead of a native button.
variant	string	default	Visual style: default, secondary, destructive, ghost, link, outline variants.
isLoading	boolean	false	Shows spinner and disables the button.

Variants

Default

<Button>Default</Button>

Secondary

<Button variant="secondary">Secondary</Button>

Destructive

<Button variant="destructive">Delete</Button>

Outline

<Button variant="outlinePrimary">Outline Primary</Button>
<Button variant="outlineSecondary">Outline Secondary</Button>
<Button variant="outlineTertiary">Outline Tertiary</Button>

Ghost

<Button variant="ghost">Hover me</Button>

Link

<Button variant="link">Go to Docs</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>

Font Sizes

<Button fontSize="xs">Extra Small Text</Button>
<Button fontSize="default">Default Text</Button>
<Button fontSize="base">Base Text</Button>
<Button fontSize="lg">Large Text</Button>

Rounded Corners

<Button rounded="sm">Small Rounded</Button>
<Button rounded="md">Medium Rounded</Button>
<Button rounded="lg">Large Rounded</Button>
<Button rounded="3xl">Pill</Button>

Full Width

<Button fullWidth>Full Width Button</Button>

Icon Buttons

<Button iconOnly aria-label="Settings">
  <SettingsIcon />
</Button>

<Button iconPosition="right">
  Next <ArrowRightIcon />
</Button>

⚠️ Accessibility Note: All icon-only buttons must have aria-label .

Loading State

<Button isLoading>Loading...</Button>
<Button variant="destructive" isLoading>Deleting</Button>

Shows a spinner overlay.
Disables button while loading.
Keeps original width intact to prevent layout shift.

Using `asChild`

Wrap another component (like a Next.js Link) with Button:

import Link from 'next/link';

<Button asChild>
  <Link href="/about">Go to About</Link>
</Button>

Useful for routing or custom wrappers.
Preserves all button styling and variants.

Compound Variants

Icon-only buttons automatically adjust padding and size:

sm → p-2 w-8 h-8
default → p-3 w-10 h-10
lg → p-4 w-12 h-12

Example with Multiple Variants

<Button
  variant="success"
  size="lg"
  fontSize="lg"
  weight="semibold"
  rounded="3xl"
  iconPosition="right"
  iconOnly={false}
  isLoading={false}
>
  Save Changes <CheckIcon />
</Button>

Notes

CVA is used for scalable variant management.
Supports all Tailwind classes via className.
Always provide aria-label for icon-only buttons.
Use isLoading for async actions to prevent multiple submissions.