Class name Type
btn Component Button
btn-lg Utility Large button
btn-md Utility Medium button (default)
btn-sm Utility Small button
btn-xs Utility Extra small button
btn-wide Utility Wide button (more horizontal padding)
btn-block Utility Full width button
btn-circle Utility Circle button with a 1:1 ratio
btn-square Utility Square button with a 1:1 ratio
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
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
button wide
Preview
HTML
button wide
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