Button

Buttons allow the user to take actions or make choices.

Class name	Type
btn	Component	Button
btn-primary	Modifier	Button with `primary` color
btn-secondary	Modifier	Button with `secondary` color
btn-accent	Modifier	Button with `accent` color
btn-info	Modifier	Button with `info` color
btn-success	Modifier	Button with `success` color
btn-warning	Modifier	Button with `warning` color
btn-error	Modifier	Button with `error` color
btn-ghost	Modifier	Button with ghost style
btn-link	Modifier	Button styled as a link
btn-outline	Modifier	Transparent Button with colored border
btn-active	Modifier	Force button to show active state
btn-disabled	Modifier	Force button to show disabled state
glass	Modifier	Button with a glass effect
loading	Modifier	Shows loading spinner
no-animation	Modifier	Disables click animation
btn-lg	Responsive	Large button
btn-md	Responsive	Medium button (default)
btn-sm	Responsive	Small button
btn-xs	Responsive	Extra small button
btn-wide	Responsive	Wide button (more horizontal padding)
btn-block	Responsive	Full width button
btn-circle	Responsive	Circle button with a 1:1 ratio
btn-square	Responsive	Square button with a 1:1 ratio

# Button

# Buttons with brand colors

# Active buttons

# Buttons with state colors

# Outline buttons

# Outline buttons with state colors

# Button sizes

# Responsive button

This button will have different sizes on different browser viewpoints

# Wide button

# Glass button

# Buttons with different HTML tags

You can use `btn` class on <button>, <input>, <a>, etc...

# Disabled buttons

# Square button

# Circle button

# Icon at start

# Icon at end

# Button block

# Button with loading spinner

# Button with loading spinner and text

# Button without click animation

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

Do you like daisyUI? tweet about it!

Support daisyUI's development: Open Collective