Button 按钮

按钮可以让用户执行命令或者作出选择。

类名
类型
btn 组件类 Button
btn-neutral
装饰类
Button with `neutral` color
btn-primary
装饰类
Button with `primary` color
btn-secondary
装饰类
Button with `secondary` color
btn-accent
装饰类
Button with `accent` color
btn-info
装饰类
Button with `info` color
btn-success
装饰类
Button with `success` color
btn-warning
装饰类
Button with `warning` color
btn-error
装饰类
Button with `error` color
btn-ghost
装饰类
Button with ghost style
btn-link
装饰类
Button styled as a link
btn-outline
装饰类
Transparent Button with colored border
btn-active
装饰类
Force button to show active state
btn-disabled
装饰类
Force button to show disabled state
glass
装饰类
Button with a glass effect
no-animation
装饰类
Disables click animation
btn-lg
响应类
Large button
btn-md
响应类
Medium button (default)
btn-sm
响应类
Small button
btn-xs
响应类
Extra small button
btn-wide
响应类
Wide button (more horizontal padding)
btn-block
响应类
Full width button
btn-circle
响应类
Circle button with a 1:1 ratio
btn-square
响应类
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
daisyUI store

New template: SaaS Landing page

Available on daisyUI store

More details