Button

Basic Buttons

Base Button

Preview Code Auto

Button('Button', cls='btn')

Buttons should always include the base `btn` class. Combine with color/style variants for different contexts.

Brand Colors

DaisyUI color variants

Preview Code Auto

Button('Neutral', cls='btn btn-neutral')
Button('Primary', cls='btn btn-primary')
Button('Secondary', cls='btn btn-secondary')
Button('Accent', cls='btn btn-accent')
Button('Info', cls='btn btn-info')
Button('Success', cls='btn btn-success')
Button('Warning', cls='btn btn-warning')
Button('Error', cls='btn btn-error')

Active States

Pressed state styling

Preview Code Auto

Button('Default', cls='btn btn-active')
Button('Primary', cls='btn btn-active btn-primary')
Button('Secondary', cls='btn btn-active btn-secondary')
Button('Accent', cls='btn btn-active btn-accent')
Button('Info', cls='btn btn-active btn-info')
Button('Success', cls='btn btn-active btn-success')
Button('Warning', cls='btn btn-active btn-warning')
Button('Error', cls='btn btn-active btn-error')

Ghost and Link Buttons

Preview Code Auto

Button('Ghost', cls='btn-ghost')
Button('Link', cls='btn-link')

Styling Variants

Soft Buttons

Preview Code Auto

Button('Default', cls='btn btn-soft')
Button('Primary', cls='btn btn-soft btn-primary')
Button('Secondary', cls='btn btn-soft btn-secondary')
Button('Accent', cls='btn btn-soft btn-accent')
Button('Info', cls='btn btn-soft btn-info')
Button('Success', cls='btn btn-soft btn-success')
Button('Warning', cls='btn btn-soft btn-warning')
Button('Error', cls='btn btn-soft btn-error')

Outline Buttons

Preview Code Auto

Button('Default', cls='btn btn-outline')
Button('Primary', cls='btn btn-outline btn-primary')
Button('Secondary', cls='btn btn-outline btn-secondary')
Button('Accent', cls='btn btn-outline btn-accent')
Button('Info', cls='btn btn-outline btn-info')
Button('Success', cls='btn btn-outline btn-success')
Button('Warning', cls='btn btn-outline btn-warning')
Button('Error', cls='btn btn-outline btn-error')

Dash Buttons

Preview Code Auto

Button('Default', cls='btn btn-dashed')
Button('Primary', cls='btn btn-dashed btn-primary')
Button('Secondary', cls='btn btn-dashed btn-secondary')
Button('Accent', cls='btn btn-dashed btn-accent')
Button('Info', cls='btn btn-dashed btn-info')
Button('Success', cls='btn btn-dashed btn-success')
Button('Warning', cls='btn btn-dashed btn-warning')
Button('Error', cls='btn btn-dashed btn-error')

Glass Button

Transparent background effect

Preview Code Auto

Button('Glass', cls='btn glass')

Sizing Options

Size Variants

Predefined size options

Preview Code Auto

Button('XLarge', cls='btn btn-xl')
Button('Large', cls='btn btn-lg')
Button('Medium', cls='btn')
Button('Small', cls='btn btn-sm')
Button('Xsmall', cls='btn btn-xs')

ℹ️ Note: Responsive prefixes require DaisyUI config

Responsive Sizing

Adaptive breakpoint sizing

Preview Code Auto

Button('Responsive', cls='btn btn-xs sm:btn-sm md:btn-md lg:btn-lg xl:btn-xl')

Size classes can be combined with...

Wide Button

Preview Code Auto

Button('Wide', cls='btn btn-wide')

Block Button

Block-level display

Preview Code Auto

Button('block', cls='btn btn-block')

Button Shapes

Square Buttons

Square-shaped variants

Preview Code Auto

Button( SVG, cls='btn btn-square'),
Button( SVG, cls='btn btn-square btn-outline')

Circle Buttons

Circular styling

Preview Code Auto

Button( SVG, cls='btn btn-circle'),
Button( SVG, cls='btn btn-circle btn-outline')

Icon Buttons

Leading Icon

Icon before text

Preview Code Auto

Button( SVG, 'Like', cls='btn')

Trailing Icon

Icon after text

Preview Code Auto

Button('Like', SVG, cls='btn')

State Handling

Element Types

Various HTML elements

Preview Code Auto

Link

A('Link', role='button', cls='btn'),
Button('Button', type='submit', cls='btn'),
Input(type='button', value='Input', cls='btn'),
Input(type='submit', value='Submit', cls='btn'),
Input(type='radio', aria_label='Radio', cls='btn'),
Input(type='checkbox', aria_label='Checkbox', cls='btn'),
Input(type='reset', value='Reset', cls='btn')

Use ARIA attributes for proper accessibility when handling disabled states

Disabled States

Disabled button variations

Preview Code Auto

Button('Attribute Disabled', disabled=True, cls='btn'),
Button('Class Disabled', tabindex='-1', role='button', aria_disabled='true', cls='btn btn-disabled')

Loading States

Loading Spinner

Preview Code Auto

Button(Span(cls='loading loading-spinner'), cls='btn btn-square')
Button(Span(cls='loading loading-spinner mr-2'),'Loading...', cls='btn' )

Class Reference

Class name	Type	Description
btn	Component	Base button
btn-neutral	Color	Neutral color variant
btn-primary	Color	Primary color variant
btn-secondary	Color	Secondary color variant
btn-accent	Color	Accent color variant
btn-info	Color	Info color variant
btn-success	Color	Success color variant
btn-warning	Color	Warning color variant
btn-error	Color	Error color variant
btn-outline	Style	Outline style variant
btn-ghost	Style	Ghost style variant
btn-link	Style	Text link appearance
btn-active	Behavior	Pressed state styling
btn-disabled	Behavior	Disabled appearance
btn-xs	Size	Extra small size
btn-sm	Size	Small size
btn-md	Size	Medium size (default)
btn-lg	Size	Large size
btn-wide	Modifier	Wider horizontal padding
btn-block	Modifier	Full-width display
btn-square	Modifier	1:1 aspect ratio
btn-circle	Modifier	Circular shape