edge-components

Button: Square Circle 

<div>
    <button class="btn btn-square">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>

    <button class="btn btn-square btn-outline">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>

    <button class="btn btn-circle">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>

    <button class="btn btn-circle btn-outline">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>

</div>
 
<div>
  @jrmc.button({ class: 'btn-square' })
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
  @end

  @jrmc.button({ class: 'btn-square btn-outline' })
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
  @end


  @jrmc.button({ class: 'btn-circle' })
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
  @end

  @jrmc.button({ class: 'btn-circle btn-outline' })
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
  @end
</div>

Button

Doc : daisyui button

Buttons allows 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

/!\ Deprecated

Button group daisyUI >= 3, use join