Class name Type
btn Component Button
btn-primary Utility Button with `primary` color
btn-secondary Utility Button with `secondary` color
btn-accent Utility Button with `accent` color
btn-info Utility Button with `info` color
btn-success Utility Button with `success` color
btn-warning Utility Button with `warning` color
btn-error Utility Button with `error` color
btn-ghost Utility Button with ghost style
btn-link Utility Button styled as a link
btn-outline Utility Transparent Button with colored border
btn-active Utility Force button to show active state
btn-disabled Utility Force button to show disabled state
glass Utility Button with a glass effect
loading Utility Shows loading spinner
no-animation Utility 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
Examples
button with brand colors
Preview
HTML
active state button
Preview
HTML
outline button
Preview
HTML
disabled button
Preview
HTML
button with state colors
Preview
HTML
responsive buttons
Preview
HTML
glass
Preview
HTML
button with diffrent HTML tags
Preview
HTML
Link
button size
Preview
HTML
button wide
Preview
HTML
icon button start
Preview
HTML
icon button end
Preview
HTML
button shapes
Preview
HTML
button shapes
Preview
HTML
button shapes
Preview
HTML
button shapes
Preview
HTML
button block
Preview
HTML
button loading
Preview
HTML
button loading
Preview
HTML
button loading
Preview
HTML
button loading
Preview
HTML
disable animation
Preview
HTML