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...
Link
# 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