Button
Interactive buttons with multiple variants, sizes, and states for user actions, fully compatible with DaisyUI 5 and Tailwind 4
Basic Colors
Standard button colors and variants
Show Code
Button Variants
Different visual styles
Show Code
Button Sizes
Various sizes for different use cases
Show Code
Button States
Different states and interactions
Show Code
Usage Notes
- Use Button component for server-side rendered buttons without interactivity
- Use Button island for client-side interactive buttons with event handlers
- Primary buttons should be used sparingly for the main action on a page
- Outline buttons work well for secondary actions
- Ghost buttons are ideal for tertiary actions or navigation
- Loading state automatically disables the button to prevent multiple submissions
- Enhanced loading spinner patterns with DaisyUI 5: supports spinner, dots, ring, and ball types
- Improved hover states and animations with smoother transitions
- Better accessibility with enhanced focus rings and ARIA support
- Enhanced color system with better semantic tokens and contrast ratios
- Supports Tailwind 4 arbitrary values for custom styling: bg-[#custom], text-[14px]
- Optimized performance with better CSS generation and tree-shaking
- Fully backward compatible - all existing usage patterns continue to work
- Respects user's prefers-reduced-motion settings for animations
API Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| active | boolean | No | false | Apply active state styling |
| aria-describedby | string | No | - | ID of element that describes this component |
| aria-expanded | boolean | No | - | Whether expandable element is expanded |
| aria-hidden | boolean | No | - | Whether element is hidden from screen readers |
| aria-label | string | No | - | Accessible label |
| as | string | No | - | Render as different HTML element (e.g., 'a', 'div') |
| children | any | No | - | Component content |
| circle | boolean | No | false | Make button circular (requires fixed dimensions) |
| class | string | No | - | Additional CSS classes |
| color | 'primary' | 'secondary' | 'accent' | 'neutral' | 'base-100' | 'base-200' | 'base-300' | 'base-content' | 'info' | 'success' | 'warning' | 'error' | No | - | Component color theme |
| disabled | boolean | No | false | Disable component interactions |
| glass | boolean | No | false | Apply glass morphism effect Examples: true Since: 1.1.0 |
| href | string | No | - | Link URL |
| id | string | No | - | HTML id attribute |
| loading | boolean | No | false | Show loading state |
| loadingType | 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity' | No | "spinner" | Loading animation type (DaisyUI 5) |
| noAnimation | boolean | No | false | Disable button animations and transitions |
| onBlur | (arg0: any) => void | No | - | Blur event handler |
| onClick | (arg0: any) => void | No | - | Click event handler (Islands only) |
| onFocus | (arg0: any) => void | No | - | Focus event handler |
| rel | string | No | - | Link relationship |
| role | string | No | - | ARIA role attribute |
| shape | 'circle' | 'square' | No | - | Button shape (alternative to circle/square props) |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | No | "md" | Component size |
| square | boolean | No | false | Make button square (equal width and height) |
| tabIndex | number | No | - | Tab index for keyboard navigation |
| target | '_blank' | '_self' | '_parent' | '_top' | No | - | Link target |
| type | 'button' | 'submit' | 'reset' | No | "button" | HTML button type attribute |
| variant | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'outline' | 'ghost' | 'link' | 'neutral' | No | - | Component visual style variant |
| wide | boolean | No | false | Make button full width Examples: true, false Since: 1.0.0 |