button

Features

• Multiple styles, sizes, and border options out of the box
• Built-in loading state with spinner and auto-disable
• Supports icons, dual icons, and collapsed icon-only mode
• Flexible asChild rendering for links and custom wrappers
• Smooth hover animations with optional AnimationIcon
• Fully typed, accessible, and responsive
• Powered by @gentleduck/variants for scalable theming
• Clean, composable, and Tailwind-optimized

Installation

npx duck-ui@latest add button

npx duck-ui@latest add button

Usage

import { Button } from '@/components/ui/button'

import { Button } from '@/components/ui/button'

<Button>Button</Button>

<Button>Button</Button>

Button

Button is a versatile and customizable React component designed to render a button with various styles and functionalities. It supports different sizes, variants, and additional features like loading states and icons. The component is flexible and can be used in a variety of scenarios, from simple buttons to complex interactive elements.

Example Usage:

import { Button } from '@/components/ui/button'
 
const MyButton = () => {
  return (
    <Tooltip>
      <Button size="large" variant="primary">
        Submit
      </Button>
      <TooltipContent>Submit Button</TooltipContent>
    </Tooltip>
  )
}

import { Button } from '@/components/ui/button'
 
const MyButton = () => {
  return (
    <Tooltip>
      <Button size="large" variant="primary">
        Submit
      </Button>
      <TooltipContent>Submit Button</TooltipContent>
    </Tooltip>
  )
}

Link

You can use the buttonVariants helper to create a any element like a link that looks like a button.

import { buttonVariants } from '@/components/ui'

import { buttonVariants } from '@/components/ui'

<Link className={buttonVariants({ variant: 'outline' })}>I'am a Link 🦆</Link>

<Link className={buttonVariants({ variant: 'outline' })}>I'am a Link 🦆</Link>

Alternatively, you can set the asChild parameter and nest the link component.

<Button asChild>
  <Link href="/tos">I'am a Link with tos 🦆</Link>
</Button>

<Button asChild>
  <Link href="/tos">I'am a Link with tos 🦆</Link>
</Button>

Examples

Primary

Secondary

Ghost

Outline

Link

Destructive

Warning

Dashed

Nothing

With Border

With Border Destructive

With Border Warning

With Border Secondary

With Icon

Loading

With Second Icon

Collapsible

Expand Icon

API Reference

Button Props

• variant ('default' | 'destructive' | 'warning' | 'outline' | 'dashed' | 'secondary' | 'ghost' | 'link' | 'expand_icon' | 'nothing', optional):
• size ('icon' | 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl' | '3xl', optional):
• border ('default' | 'primary' | 'secondary' | 'destructive' | 'warning', optional):
• asChild (boolean, optional): If true, renders using a custom child element via Slot (e.g. a Link).
• loading (boolean, optional): If true, shows a spinning loader icon and disables the button.
• disabled (boolean, optional): Disables the button manually.
• icon (React.ReactNode, optional): Icon placed before the content (left-aligned or centered if collapsed).
• secondIcon (React.ReactNode, optional): Icon placed after the content (right-aligned).
• isCollapsed (boolean, optional):If true, renders icon-only button (hides children and secondIcon).
• type ('button' | 'submit' | 'reset', optional): Native HTML button type. Default is 'button'.
• ...props (React.HTMLProps<HTMLButtonElement>): All native HTML button props are supported.

AnimationIcon Props

• animationIcon ({ icon?: React.ReactNode; iconPlacement?: 'left' | 'right' }, optional):