button
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 |
| 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-8default→p-3 w-10 h-10lg→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-labelfor icon-only buttons. - Use
isLoadingfor async actions to prevent multiple submissions.