• Components
  • Button

Button 

@!jrmc.button({ text: 'Button' })
<button  class="btn">
  Button
</button>

Buttons with brand colors 

@!jrmc.button({ text: 'neutral', class: 'btn-neutral' })
@!jrmc.button({ text: 'primary', class: 'btn-primary' })
@!jrmc.button({ text: 'secondary', class: 'btn-secondary' })
@!jrmc.button({ text: 'accent', class: 'btn-accent' })
@!jrmc.button({ text: 'ghost', class: 'btn-ghost' })
@!jrmc.button({ text: 'link', class: 'btn-link' })
<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>

Active buttons 

@!jrmc.button({ text: 'default', class: "btn-active" })
@!jrmc.button({ text: 'default', class: "btn-active btn-neutral" })
@!jrmc.button({ text: "primary", class: "btn-active btn-primary" })
@!jrmc.button({ text: "secondary", class: "btn-active btn-secondary" })
@!jrmc.button({ text: "accent", class: "btn-active btn-accent" })
@!jrmc.button({ text: "ghost", class: "btn-active btn-ghost" })
@!jrmc.button({ text: "link", class: "btn-active btn-link" })
<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>

Buttons with state colors 

@!jrmc.button({ text: 'info', class: 'btn-info' })
@!jrmc.button({ text: 'success', class: 'btn-success' })
@!jrmc.button({ text: 'warning', class: 'btn-warning' })
@!jrmc.button({ text: 'error', class: 'btn-error' })
<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>

Outline buttons 

@!jrmc.button({ text: 'default', class: 'btn-outline' })
@!jrmc.button({ text: 'primary', class: 'btn-outline btn-primary' })
@!jrmc.button({ text: 'secondary', class: 'btn-outline btn-secondary' })
@!jrmc.button({ text: 'accent', class: 'btn-outline btn-accent' })
<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>

Outline buttons with state colors 

@!jrmc.button({ text: 'info', class: 'btn-outline btn-info' })
@!jrmc.button({ text: 'success', class: 'btn-outline btn-success' })
@!jrmc.button({ text: 'warning', class: 'btn-outline btn-warning' })
@!jrmc.button({ text: 'error', class: 'btn-outline btn-error' })
<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 sizes 

@!jrmc.button({ text: 'large', class: 'btn-lg' })
@!jrmc.button({ text: 'Normal' })
@!jrmc.button({ text: 'Small', class: 'btn-sm' })
@!jrmc.button({ text: 'Tiny', class: 'btn-xs' })
<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>

Responsive button 

@!jrmc.button({ text: 'responsive', class: 'btn-xs sm:btn-sm md:btn-md lg:btn-lg' })
<button  class="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg">
  responsive
</button>

Wide button 

@!jrmc.button({ text: 'wide', class: 'btn-wide' })
<button  class="btn btn-wide">
  wide
</button>

Glass button 

@!jrmc.button({ text: 'glass', class: 'glass' })
<button  class="btn glass">
  glass
</button>

Buttons with different HTML tags

link 
@!jrmc.button({ text: 'button', type: 'button' })
@!jrmc.button({ text: 'button submit', type: 'submit' })
@!jrmc.button.link({ text: 'link' })
@!jrmc.button.input({ text: 'input' })
@!jrmc.button.input({ text: 'submit', type: 'submit' })
@!jrmc.button.input({ text: 'reset', type: 'reset' })
@!jrmc.button.label({ text: 'label' })
<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>

Disabled buttons 

@!jrmc.button({ text: 'button', disabled: true })
<button disabled class="btn">
  button
</button>

Square button 

@jrmc.button({ class: 'btn-square' })
  <svg style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="w-6 h-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 style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="w-6 h-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
<button  class="btn btn-square">
    <svg style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="w-6 h-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 style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="w-6 h-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>

Circle button 

@jrmc.button({ class: 'btn-circle' })
  <svg style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="w-6 h-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 style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="w-6 h-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
<button  class="btn btn-circle">
    <svg style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="w-6 h-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 style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="w-6 h-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>

Icon at start 

@jrmc.button({ class: 'gap-2' })
  <svg style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="w-6 h-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 style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="w-6 h-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>

Icon at end 

@jrmc.button({ class: 'gap-2' })
  Button
  <svg style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="w-6 h-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 style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="w-6 h-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 block 

@!jrmc.button({ text: 'block', class: 'btn-block' })
<button  class="btn btn-block">
  block
</button>

Button with loading spinner 

@jrmc.button({ class: 'btn-square' })
  @!jrmc.loading.spinner()
@end
<button  class="btn btn-square">
  <span class="loading loading-spinner" ></span>
</button>

Button with loading spinner and text 

@jrmc.button({ text: 'button' })
  @!jrmc.loading.spinner()
  Text
@end
<button  class="btn">
  <span class="loading loading-spinner" ></span>
  Text
</button>

Button without click animation 

@!jrmc.button({ text: 'no-animation', class: 'no-animation' })
<button  class="btn no-animation">
  no-animation
</button>