<button class="btn">
Button
</button>
<button class="btn btn-neutral">
neutral
</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-ghost">
ghost
</button>
<button class="btn btn-link">
link
</button>
<button class="btn btn-active">
default
</button>
<button class="btn btn-active btn-neutral">
default
</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-ghost">
ghost
</button>
<button class="btn btn-active btn-link">
link
</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-outline">
default
</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-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-lg">
large
</button>
<button class="btn">
Normal
</button>
<button class="btn btn-sm">
Small
</button>
<button class="btn btn-xs">
Tiny
</button>
<button class="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg">
responsive
</button>
<button class="btn btn-wide">
wide
</button>
<button class="btn glass">
glass
</button>
<button type="button" class="btn">
button
</button>
<button type="submit" class="btn">
button submit
</button>
<a role="button" class="btn">
link
</a>
<input
type="button"
class="btn"
value="input" />
<input
type="submit"
class="btn"
value="submit" />
<input
type="reset"
class="btn"
value="reset" />
<label
tabindex="0"
class="btn">label</label>
<button disabled class="btn">
button
</button>
<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>
@jrmc.button({ class: 'gap-2' })
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
Button
@end
<button class="btn gap-2">
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
Button
</button>
@jrmc.button({ class: 'gap-2' })
Button
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
@end
<button class="btn gap-2">
Button
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
</button>
<button class="btn btn-block">
block
</button>
Button with loading spinner
<button class="btn btn-square">
<span class="loading loading-spinner" ></span>
</button>
<button class="btn">
<span class="loading loading-spinner" ></span>
Text
</button>
<button class="btn no-animation">
no-animation
</button>