Home/Components/Button

Button Component

A versatile and interactive button component for your application. Supports multiple variants, sizes, and states to fit any design need.

Form ControlInteractive

Usage

import { Button } from '@featherstudio/react-daisyui-kit';

export default function App() {
  return (
    <>
      <Button variant="primary">Primary Button</Button>
      <Button variant="secondary">Secondary Button</Button>
      <Button variant="success" size="lg">Success Button</Button>
      <Button variant="danger" size="sm" disabled>
        Disabled Button
      </Button>
    </>
  );
}

Features

Multiple Variants

Choose from primary, secondary, success, and danger variants to match your design.

Multiple Sizes

Available in xs, sm, md, and lg sizes for any use case.

State Support

Full support for hover, active, disabled, and loading states.

Customizable

Easy to customize colors, sizes, and styles using Tailwind CSS.

Props

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'success' \| 'danger'	'primary'	Button variant style
size	'xs' \| 'sm' \| 'md' \| 'lg'	'md'	Button size
disabled	boolean	false	Disable the button
onClick	function	-	Click handler function
children	ReactNode	-	Button label content

← Back to Components