Button
Buttons allow the user to take actions or make choices.
| Class name | Type | |
|---|---|---|
| btn | Component | Button |
| btn-neutral | Color | neutral color |
| btn-primary | Color | primary color |
| btn-secondary | Color | secondary color |
| btn-accent | Color | accent color |
| btn-info | Color | info color |
| btn-success | Color | success color |
| btn-warning | Color | warning color |
| btn-error | Color | error color |
| btn-outline | Style | outline style |
| btn-soft | Style | soft style |
| btn-ghost | Style | ghost style |
| btn-link | Style | looks like a link |
| btn-active | Style | looks active |
| btn-disabled | Style | looks disabled |
| btn-xs | Size | Extra small size |
| btn-sm | Size | Small size |
| btn-md | Size | Medium size (default) |
| btn-lg | Size | Large size |
| btn-xl | Size | Extra large size |
| btn-wide | Modifier | more horizontal padding |
| btn-block | Modifier | Full width |
| btn-square | Modifier | 1:1 ratio |
| btn-circle | Modifier | 1:1 ratio with rounded corners |
<button class="$$btn">Default</button>
<button class="$$btn">Default</button>
<button class="$$btn">Default</button>
<button class="$$btn">Default</button><button class="$$btn $$btn-xs">Xsmall</button> <button class="$$btn $$btn-sm">Small</button> <button class="$$btn">Medium</button> <button class="$$btn $$btn-lg">Large</button> <button class="$$btn $$btn-xl">Xlarge</button>
<button class="$$btn $$btn-xs">Xsmall</button>
<button class="$$btn $$btn-sm">Small</button>
<button class="$$btn">Medium</button>
<button class="$$btn $$btn-lg">Large</button>
<button class="$$btn $$btn-xl">Xlarge</button>
<button class="$$btn $$btn-xs">Xsmall</button>
<button class="$$btn $$btn-sm">Small</button>
<button class="$$btn">Medium</button>
<button class="$$btn $$btn-lg">Large</button>
<button class="$$btn $$btn-xl">Xlarge</button>
<button class="$$btn $$btn-xs">Xsmall</button>
<button class="$$btn $$btn-sm">Small</button>
<button class="$$btn">Medium</button>
<button class="$$btn $$btn-lg">Large</button>
<button class="$$btn $$btn-xl">Xlarge</button>This button will have different sizes on different browser viewpoints
<button class="$$btn $$btn-xs sm:$$btn-sm md:$$btn-md lg:$$btn-lg xl:$$btn-xl">Responsive</button>
<button class="$$btn $$btn-xs sm:$$btn-sm md:$$btn-md lg:$$btn-lg xl:$$btn-xl">Responsive</button>
<button class="$$btn $$btn-xs sm:$$btn-sm md:$$btn-md lg:$$btn-lg xl:$$btn-xl">Responsive</button>
<button class="$$btn $$btn-xs sm:$$btn-sm md:$$btn-md lg:$$btn-lg xl:$$btn-xl">Responsive</button><button class="$$btn $$btn-primary">Primary</button> <button class="$$btn $$btn-secondary">Secondary</button> <button class="$$btn $$btn-accent">Accent</button> <button class="$$btn $$btn-neutral">Neutral</button> <button class="$$btn $$btn-info">Info</button> <button class="$$btn $$btn-success">Success</button> <button class="$$btn $$btn-warning">Warning</button> <button class="$$btn $$btn-error">Error</button>
<button class="$$btn $$btn-primary">Primary</button>
<button class="$$btn $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-accent">Accent</button>
<button class="$$btn $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-info">Info</button>
<button class="$$btn $$btn-success">Success</button>
<button class="$$btn $$btn-warning">Warning</button>
<button class="$$btn $$btn-error">Error</button>
<button class="$$btn $$btn-primary">Primary</button>
<button class="$$btn $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-accent">Accent</button>
<button class="$$btn $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-info">Info</button>
<button class="$$btn $$btn-success">Success</button>
<button class="$$btn $$btn-warning">Warning</button>
<button class="$$btn $$btn-error">Error</button>
<button class="$$btn $$btn-primary">Primary</button>
<button class="$$btn $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-accent">Accent</button>
<button class="$$btn $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-info">Info</button>
<button class="$$btn $$btn-success">Success</button>
<button class="$$btn $$btn-warning">Warning</button>
<button class="$$btn $$btn-error">Error</button><button class="$$btn $$btn-soft $$btn-primary">Primary</button> <button class="$$btn $$btn-soft $$btn-secondary">Secondary</button> <button class="$$btn $$btn-soft $$btn-accent">Accent</button> <button class="$$btn $$btn-soft $$btn-neutral">Neutral</button> <button class="$$btn $$btn-soft $$btn-info">Info</button> <button class="$$btn $$btn-soft $$btn-success">Success</button> <button class="$$btn $$btn-soft $$btn-warning">Warning</button> <button class="$$btn $$btn-soft $$btn-error">Error</button>
<button class="$$btn $$btn-soft $$btn-primary">Primary</button>
<button class="$$btn $$btn-soft $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-soft $$btn-accent">Accent</button>
<button class="$$btn $$btn-soft $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-soft $$btn-info">Info</button>
<button class="$$btn $$btn-soft $$btn-success">Success</button>
<button class="$$btn $$btn-soft $$btn-warning">Warning</button>
<button class="$$btn $$btn-soft $$btn-error">Error</button>
<button class="$$btn $$btn-soft $$btn-primary">Primary</button>
<button class="$$btn $$btn-soft $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-soft $$btn-accent">Accent</button>
<button class="$$btn $$btn-soft $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-soft $$btn-info">Info</button>
<button class="$$btn $$btn-soft $$btn-success">Success</button>
<button class="$$btn $$btn-soft $$btn-warning">Warning</button>
<button class="$$btn $$btn-soft $$btn-error">Error</button>
<button class="$$btn $$btn-soft $$btn-primary">Primary</button>
<button class="$$btn $$btn-soft $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-soft $$btn-accent">Accent</button>
<button class="$$btn $$btn-soft $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-soft $$btn-info">Info</button>
<button class="$$btn $$btn-soft $$btn-success">Success</button>
<button class="$$btn $$btn-soft $$btn-warning">Warning</button>
<button class="$$btn $$btn-soft $$btn-error">Error</button><button class="$$btn $$btn-outline $$btn-primary">Primary</button> <button class="$$btn $$btn-outline $$btn-secondary">Secondary</button> <button class="$$btn $$btn-outline $$btn-accent">Accent</button> <button class="$$btn $$btn-outline $$btn-neutral">Neutral</button> <button class="$$btn $$btn-outline $$btn-info">Info</button> <button class="$$btn $$btn-outline $$btn-success">Success</button> <button class="$$btn $$btn-outline $$btn-warning">Warning</button> <button class="$$btn $$btn-outline $$btn-error">Error</button>
<button class="$$btn $$btn-outline $$btn-primary">Primary</button>
<button class="$$btn $$btn-outline $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-outline $$btn-accent">Accent</button>
<button class="$$btn $$btn-outline $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-outline $$btn-info">Info</button>
<button class="$$btn $$btn-outline $$btn-success">Success</button>
<button class="$$btn $$btn-outline $$btn-warning">Warning</button>
<button class="$$btn $$btn-outline $$btn-error">Error</button>
<button class="$$btn $$btn-outline $$btn-primary">Primary</button>
<button class="$$btn $$btn-outline $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-outline $$btn-accent">Accent</button>
<button class="$$btn $$btn-outline $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-outline $$btn-info">Info</button>
<button class="$$btn $$btn-outline $$btn-success">Success</button>
<button class="$$btn $$btn-outline $$btn-warning">Warning</button>
<button class="$$btn $$btn-outline $$btn-error">Error</button>
<button class="$$btn $$btn-outline $$btn-primary">Primary</button>
<button class="$$btn $$btn-outline $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-outline $$btn-accent">Accent</button>
<button class="$$btn $$btn-outline $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-outline $$btn-info">Info</button>
<button class="$$btn $$btn-outline $$btn-success">Success</button>
<button class="$$btn $$btn-outline $$btn-warning">Warning</button>
<button class="$$btn $$btn-outline $$btn-error">Error</button><button class="$$btn $$btn-dash $$btn-primary">Primary</button> <button class="$$btn $$btn-dash $$btn-secondary">Secondary</button> <button class="$$btn $$btn-dash $$btn-accent">Accent</button> <button class="$$btn $$btn-dash $$btn-neutral">Neutral</button> <button class="$$btn $$btn-dash $$btn-info">Info</button> <button class="$$btn $$btn-dash $$btn-success">Success</button> <button class="$$btn $$btn-dash $$btn-warning">Warning</button> <button class="$$btn $$btn-dash $$btn-error">Error</button>
<button class="$$btn $$btn-dash $$btn-primary">Primary</button>
<button class="$$btn $$btn-dash $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-dash $$btn-accent">Accent</button>
<button class="$$btn $$btn-dash $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-dash $$btn-info">Info</button>
<button class="$$btn $$btn-dash $$btn-success">Success</button>
<button class="$$btn $$btn-dash $$btn-warning">Warning</button>
<button class="$$btn $$btn-dash $$btn-error">Error</button>
<button class="$$btn $$btn-dash $$btn-primary">Primary</button>
<button class="$$btn $$btn-dash $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-dash $$btn-accent">Accent</button>
<button class="$$btn $$btn-dash $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-dash $$btn-info">Info</button>
<button class="$$btn $$btn-dash $$btn-success">Success</button>
<button class="$$btn $$btn-dash $$btn-warning">Warning</button>
<button class="$$btn $$btn-dash $$btn-error">Error</button>
<button class="$$btn $$btn-dash $$btn-primary">Primary</button>
<button class="$$btn $$btn-dash $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-dash $$btn-accent">Accent</button>
<button class="$$btn $$btn-dash $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-dash $$btn-info">Info</button>
<button class="$$btn $$btn-dash $$btn-success">Success</button>
<button class="$$btn $$btn-dash $$btn-warning">Warning</button>
<button class="$$btn $$btn-dash $$btn-error">Error</button><button class="$$btn $$btn-active">Default</button> <button class="$$btn $$btn-active $$btn-neutral">Neutral</button> <button class="$$btn $$btn-active $$btn-primary">Primary</button> <button class="$$btn $$btn-active $$btn-secondary">Secondary</button> <button class="$$btn $$btn-active $$btn-accent">Accent</button> <button class="$$btn $$btn-active $$btn-info">Info</button> <button class="$$btn $$btn-active $$btn-success">Success</button> <button class="$$btn $$btn-active $$btn-warning">Warning</button> <button class="$$btn $$btn-active $$btn-error">Error</button>
<button class="$$btn $$btn-active">Default</button>
<button class="$$btn $$btn-active $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-active $$btn-primary">Primary</button>
<button class="$$btn $$btn-active $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-active $$btn-accent">Accent</button>
<button class="$$btn $$btn-active $$btn-info">Info</button>
<button class="$$btn $$btn-active $$btn-success">Success</button>
<button class="$$btn $$btn-active $$btn-warning">Warning</button>
<button class="$$btn $$btn-active $$btn-error">Error</button>
<button class="$$btn $$btn-active">Default</button>
<button class="$$btn $$btn-active $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-active $$btn-primary">Primary</button>
<button class="$$btn $$btn-active $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-active $$btn-accent">Accent</button>
<button class="$$btn $$btn-active $$btn-info">Info</button>
<button class="$$btn $$btn-active $$btn-success">Success</button>
<button class="$$btn $$btn-active $$btn-warning">Warning</button>
<button class="$$btn $$btn-active $$btn-error">Error</button>
<button class="$$btn $$btn-active">Default</button>
<button class="$$btn $$btn-active $$btn-neutral">Neutral</button>
<button class="$$btn $$btn-active $$btn-primary">Primary</button>
<button class="$$btn $$btn-active $$btn-secondary">Secondary</button>
<button class="$$btn $$btn-active $$btn-accent">Accent</button>
<button class="$$btn $$btn-active $$btn-info">Info</button>
<button class="$$btn $$btn-active $$btn-success">Success</button>
<button class="$$btn $$btn-active $$btn-warning">Warning</button>
<button class="$$btn $$btn-active $$btn-error">Error</button><button class="$$btn $$btn-ghost">Ghost</button> <button class="$$btn $$btn-link">Link</button>
<button class="$$btn $$btn-ghost">Ghost</button>
<button class="$$btn $$btn-link">Link</button>
<button class="$$btn $$btn-ghost">Ghost</button>
<button class="$$btn $$btn-link">Link</button>
<button class="$$btn $$btn-ghost">Ghost</button>
<button class="$$btn $$btn-link">Link</button><button class="$$btn $$btn-wide">Wide</button>
<button class="$$btn $$btn-wide">Wide</button>
<button class="$$btn $$btn-wide">Wide</button>
<button class="$$btn $$btn-wide">Wide</button><a role="button" class="$$btn">Link</a> <button type="submit" class="$$btn">Button</button> <input type="button" value="Input" class="$$btn" /> <input type="submit" value="Submit" class="$$btn" /> <input type="radio" aria-label="Radio" class="$$btn" /> <input type="checkbox" aria-label="Checkbox" class="$$btn" /> <input type="reset" value="Reset" class="$$btn" />
<a role="button" class="$$btn">Link</a>
<button type="submit" class="$$btn">Button</button>
<input type="button" value="Input" class="$$btn" />
<input type="submit" value="Submit" class="$$btn" />
<input type="radio" aria-label="Radio" class="$$btn" />
<input type="checkbox" aria-label="Checkbox" class="$$btn" />
<input type="reset" value="Reset" class="$$btn" />
<a role="button" class="$$btn">Link</a>
<button type="submit" class="$$btn">Button</button>
<input type="button" value="Input" class="$$btn" />
<input type="submit" value="Submit" class="$$btn" />
<input type="radio" aria-label="Radio" class="$$btn" />
<input type="checkbox" aria-label="Checkbox" class="$$btn" />
<input type="reset" value="Reset" class="$$btn" />
<a role="button" class="$$btn">Link</a>
<button type="submit" class="$$btn">Button</button>
<input type="button" value="Input" class="$$btn" />
<input type="submit" value="Submit" class="$$btn" />
<input type="radio" aria-label="Radio" class="$$btn" />
<input type="checkbox" aria-label="Checkbox" class="$$btn" />
<input type="reset" value="Reset" class="$$btn" /><button class="$$btn" disabled="disabled">Disabled using attribute</button> <button class="$$btn $$btn-disabled" tabindex="-1" role="button" aria-disabled="true"> Disabled using class name </button>
<button class="$$btn" disabled="disabled">Disabled using attribute</button>
<button class="$$btn $$btn-disabled" tabindex="-1" role="button" aria-disabled="true">
Disabled using class name
</button>
<button class="$$btn" disabled="disabled">Disabled using attribute</button>
<button class="$$btn $$btn-disabled" tabindex="-1" role="button" aria-disabled="true">
Disabled using class name
</button>
<button class="$$btn" disabled="disabled">Disabled using attribute</button>
<button class="$$btn $$btn-disabled" tabindex="-1" role="button" aria-disabled="true">
Disabled using class name
</button>square aspect ratio or with rounded corners
<button class="$$btn $$btn-square"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg> </button> <button class="$$btn $$btn-circle"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg> </button>
<button class="$$btn $$btn-square">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
</button>
<button class="$$btn $$btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
</button>
<button class="$$btn $$btn-square">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
</button>
<button class="$$btn $$btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
</button>
<button class="$$btn $$btn-square">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
</button>
<button class="$$btn $$btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
</button><button class="$$btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg> Like </button> <button class="$$btn"> Like <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg> </button>
<button class="$$btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
Like
</button>
<button class="$$btn">
Like
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
</button>
<button class="$$btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
Like
</button>
<button class="$$btn">
Like
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
</button>
<button class="$$btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
Like
</button>
<button class="$$btn">
Like
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
</button><button class="$$btn $$btn-block">block</button>
<button class="$$btn $$btn-block">block</button>
<button class="$$btn $$btn-block">block</button>
<button class="$$btn $$btn-block">block</button><button class="$$btn $$btn-square"> <span class="$$loading $$loading-spinner"></span> </button> <button class="$$btn"> <span class="$$loading $$loading-spinner"></span> loading </button>
<button class="$$btn $$btn-square">
<span class="$$loading $$loading-spinner"></span>
</button>
<button class="$$btn">
<span class="$$loading $$loading-spinner"></span>
loading
</button>
<button class="$$btn $$btn-square">
<span class="$$loading $$loading-spinner"></span>
</button>
<button class="$$btn">
<span class="$$loading $$loading-spinner"></span>
loading
</button>
<button class="$$btn $$btn-square">
<span class="$$loading $$loading-spinner"></span>
</button>
<button class="$$btn">
<span class="$$loading $$loading-spinner"></span>
loading
</button>Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
