Buttons

Here are some examples showcasing button.

Basic Buttons

Buttons are used to trigger actions. They can be used to submit forms, navigate to other pages, or trigger any other action. And they come in various styles and colors.

Preview

Code

.my-2.flex.flex-col.lg:flex-row.gap-4
  = daisy_button do
    Plain Button

  = daisy_button(css: "btn-primary") do
    Primary Button

  = daisy_button(css: "btn-secondary") do
    Secondary Button

  = daisy_button(css: "btn-accent") do
    Accent Button

  = daisy_button(css: "btn-ghost") do
    Ghost Button

  = daisy_button(css: "btn-link") do
    Link Button

Icon Buttons

Buttons can also have an icon on the left or right side.

Preview

Code

.flex.flex-col.md:flex-row.items-center.justify-center.gap-4
  = daisy_button(icon: "plus", css: "btn-circle")
  = daisy_button(icon: "minus", css: "btn-circle")
  = daisy_button(css: "hover:btn-secondary", icon: "heart", title: "Favorites")
  = daisy_button(css: "btn-accent", left_icon: "cloud", right_icon: "folder", title: "Cloud Files")
  = daisy_button(css: "btn-primary btn-lg", right_icon: "chevron-right", right_icon_css: "w-8 h-8", title: "Go")

Multiple Sizes

You can also use various sizes.

Preview

Code

.my-2.flex.flex-col.lg:flex-row.gap-4.items-center
  = daisy_button(css: "btn-lg") do
    Big Button

  = daisy_button do
    Default Button

  = daisy_button(css: "btn-sm") do
    Small Button

  = daisy_button(css: "btn-xs") do
    Tiny Button

Custom Buttons

You can also create custom buttons.

Preview

Code

= daisy_button(css: "bg-gradient-to-r from-blue-500 to-blue-700 text-white rounded-full") do
  .loading.loading-spinner.mr-1
  %span
    Gradient Button

Made with by Profoundry .