Tailwind CSS Button

Class Name	Type	Description
btn	Component	Base class for the button component.
btn-neutral	Modifier	Button with ’neutral’ color.
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-soft	Modifier	Soft colored button.
btn-outline	Modifier	Transparent button with colored border.
btn-gradient	Modifier	Gradient button
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.
btn-xs	Responsive	Button with extra small size.
btn-sm	Responsive	Button with small size.
btn-lg	Responsive	Button with large size.
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.
no-animation	Modifier	Disables click animation.
rounded-full	Utility	Utility class for rounded buttons.

Variants

Solid buttons

The standard format for button is component class btn, accompanied by modifier class btn-{semantic-color}.

<button class="btn">Default</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-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>

Soft buttons

Add modifier class btn-soft for soft colored buttons.

<button class="btn btn-soft">Default</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-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>

Outline buttons

Add modifier class btn-outline for outline colored buttons.

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

Text buttons

Add modifier class btn-text for text colored buttons.

<button class="btn btn-text">Default</button>
<button class="btn btn-text btn-primary">Primary</button>
<button class="btn btn-text btn-secondary">Secondary</button>
<button class="btn btn-text btn-accent">Accent</button>
<button class="btn btn-text btn-info">Info</button>
<button class="btn btn-text btn-success">Success</button>
<button class="btn btn-text btn-warning">Warning</button>
<button class="btn btn-text btn-error">Error</button>

Gradient buttons

Add modifier class btn-gradient for gradient colored buttons.

<button class="btn btn-gradient">Default</button>
<button class="btn btn-gradient btn-primary">Primary</button>
<button class="btn btn-gradient btn-secondary">Secondary</button>
<button class="btn btn-gradient btn-accent">Accent</button>
<button class="btn btn-gradient btn-info">Info</button>
<button class="btn btn-gradient btn-success">Success</button>
<button class="btn btn-gradient btn-warning">Warning</button>
<button class="btn btn-gradient btn-error">Error</button>

Shapes

Pilled buttons

Use the rounded-full utility class to make buttons circular. The default shape of the button but can be altered by using TailwindCSS Border Radius utility classes.

<button class="btn btn-primary rounded-full">Primary</button>
<button class="btn btn-soft btn-primary rounded-full">Primary</button>
<button class="btn btn-outline btn-primary rounded-full">Primary</button>

Rounded buttons

This is the default shape of button.

States

States variants

Use the btn-active class to force the button to show the active state and the btn-disabled class to force the button to show the disabled state.

Use state classes with any button variants.

Size

Size variants

Add responsive class btn-{size} where {size} = xs|sm|lg for button of different sizes.

For medium size button, use component class btn.

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-xs">Tiny</button>

Wide button

To create a wide button, add the btn-wide class which provides additional horizontal padding.

Block button

To create a wide button, add the btn-block class which occupies the full width of the parent container.

Responsive button

This button will have different sizes on different browser viewpoints by using thw following classes max-sm:btn-sm and lg:btn-lg.

Icon buttons

Icon at start/end

Use any icons at start/end the button.

<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-primary"><span class="icon-[tabler--star]"></span> Primary</button>
  <button class="btn btn-soft btn-primary"><span class="icon-[tabler--star]"></span> Primary</button>
  <button class="btn btn-outline btn-primary"><span class="icon-[tabler--star]"></span> Primary</button>
  <button class="btn btn-gradient btn-primary"><span class="icon-[tabler--star]"></span> Primary</button>
</div>

<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-primary">Primary <span class="icon-[tabler--star]"></span></button>
  <button class="btn btn-soft btn-primary">Primary <span class="icon-[tabler--star]"></span></button>
  <button class="btn btn-outline btn-primary">Primary <span class="icon-[tabler--star]"></span></button>
  <button class="btn btn-gradient btn-primary">Primary <span class="icon-[tabler--star]"></span></button>
</div>

Icon only

Use btn-square or btn-circle to create circle/square button with a 1:1 ratio.

<button class="btn btn-square btn-primary" aria-label="Icon Button"><span class="icon-[tabler--star]"></span></button>
<button class="btn btn-square btn-soft btn-primary" aria-label="Soft Icon Button"><span class="icon-[tabler--star]"></span></button>
<button class="btn btn-square btn-outline btn-primary" aria-label="Outline Icon Button"><span class="icon-[tabler--star]"></span></button>
<button class="btn btn-square btn-gradient btn-primary" aria-label="Gradient Icon Button"><span class="icon-[tabler--star]"></span></button>
<button class="btn btn-circle btn-primary" aria-label="Circle Icon Button"><span class="icon-[tabler--star]"></span></button>
<button class="btn btn-circle btn-soft btn-primary" aria-label="Circle Soft Icon Button"><span class="icon-[tabler--star]"></span></button>
<button class="btn btn-circle btn-outline btn-primary" aria-label="Circle Outline Icon Button"><span class="icon-[tabler--star]"></span></button>
<button class="btn btn-circle btn-gradient btn-primary" aria-label="Circle Gradient Icon Button"><span class="icon-[tabler--star]"></span></button>

Input tags

Buttons with input tags

You can use btn class on <button>, <input>, <a>, etc…

<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" />

Illustrations

Create custom Social, Payment, and other buttons as per the following example code.

<!-- Solid -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn border-[#1877F2] bg-[#1877F2] text-white shadow-[#1877F2]/30 hover:border-[#1877F2] hover:bg-[#1877F2]/90" >
    <span class="icon-[tabler--brand-facebook]"></span> Facebook
  </button>
  <button class="btn border-[#1da1f2] bg-[#1da1f2] text-white shadow-[#1da1f2]/30 hover:border-[#1da1f2] hover:bg-[#1da1f2]/90" >
    <span class="icon-[tabler--brand-x]"></span> Twitter
  </button>
  <button class="btn border-[#0a66c2] bg-[#0a66c2] text-white shadow-[#0a66c2]/30 hover:border-[#0a66c2] hover:bg-[#0a66c2]/90" >
    <span class="icon-[tabler--brand-linkedin]"></span> LinkedIn
  </button>
  <button class="btn border-[#2b3137] bg-[#2b3137] text-white shadow-[#2b3137]/30 hover:border-[#2b3137] hover:bg-[#2b3137]/90" >
    <span class="icon-[tabler--brand-github]"></span> Github
  </button>
</div>

<!-- Soft -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-soft bg-[#1877F2]/15 text-[#1877F2] hover:bg-[#1877F2]/25">
    <span class="icon-[tabler--brand-facebook]"></span> Facebook
  </button>
  <button class="btn btn-soft bg-[#1da1f2]/15 text-[#1da1f2] hover:bg-[#1da1f2]/25">
    <span class="icon-[tabler--brand-x]"></span> Twitter
  </button>
  <button class="btn btn-soft bg-[#0a66c2]/15 text-[#0a66c2] hover:bg-[#0a66c2]/25">
    <span class="icon-[tabler--brand-linkedin]"></span> LinkedIn
  </button>
  <button class="btn btn-soft bg-[#2b3137]/15 text-[#2b3137] hover:bg-[#2b3137]/25">
    <span class="icon-[tabler--brand-github]"></span> Github
  </button>
</div>

<!-- Outline -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-outline text-[#1877F2] hover:border-[#1877F2] hover:bg-[#1877F2]/10">
    <span class="icon-[tabler--brand-facebook]"></span> Facebook
  </button>
  <button class="btn btn-outline text-[#1da1f2] hover:border-[#1da1f2] hover:bg-[#1da1f2]/10">
    <span class="icon-[tabler--brand-x]"></span> Twitter
  </button>
  <button class="btn btn-outline text-[#0a66c2] hover:border-[#0a66c2] hover:bg-[#0a66c2]/10">
    <span class="icon-[tabler--brand-linkedin]"></span> LinkedIn
  </button>
  <button class="btn btn-outline text-[#2b3137] hover:border-[#2b3137] hover:bg-[#2b3137]/10">
    <span class="icon-[tabler--brand-github]"></span> Github
  </button>
</div>

Use btn-square or btn-circle to create circle/square buttons.

<!-- Solid -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-square border-[#1877F2] bg-[#1877F2] text-white shadow-[#1877F2]/30 hover:border-[#1877F2] hover:bg-[#1877F2]/90" aria-label="Facebook Icon Button" >
    <span class="icon-[tabler--brand-facebook]"></span>
  </button>
  <button class="btn btn-square border-[#1da1f2] bg-[#1da1f2] text-white shadow-[#1da1f2]/30 hover:border-[#1da1f2] hover:bg-[#1da1f2]/90" aria-label="X Icon Button" >
    <span class="icon-[tabler--brand-x]"></span>
  </button>
  <button class="btn btn-circle border-[#0a66c2] bg-[#0a66c2] text-white shadow-[#0a66c2]/30 hover:border-[#0a66c2] hover:bg-[#0a66c2]/90" aria-label="Linkedin Icon Button" >
    <span class="icon-[tabler--brand-linkedin]"></span>
  </button>
  <button class="btn btn-circle border-[#2b3137] bg-[#2b3137] text-white shadow-[#2b3137]/30 hover:border-[#2b3137] hover:bg-[#2b3137]/90" aria-label="Github Icon Button" >
    <span class="icon-[tabler--brand-github]"></span>
  </button>
</div>

<!-- Soft -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-square btn-soft bg-[#1877F2]/15 text-[#1877F2] hover:bg-[#1877F2]/25" aria-label="Facebook Soft Icon Button">
    <span class="icon-[tabler--brand-facebook]"></span>
  </button>
  <button class="btn btn-square btn-soft bg-[#1da1f2]/15 text-[#1da1f2] hover:bg-[#1da1f2]/25" aria-label="X Soft Icon Button">
    <span class="icon-[tabler--brand-x]"></span>
  </button>
  <button class="btn btn-circle btn-soft bg-[#0a66c2]/15 text-[#0a66c2] hover:bg-[#0a66c2]/25" aria-label="Linkedin Soft Icon Button">
    <span class="icon-[tabler--brand-linkedin]"></span>
  </button>
  <button class="btn btn-circle btn-soft bg-[#2b3137]/15 text-[#2b3137] hover:bg-[#2b3137]/25" aria-label="Github Soft Icon Button">
    <span class="icon-[tabler--brand-github]"></span>
  </button>
</div>

<!-- Outline -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-square btn-outline text-[#1877F2] hover:border-[#1877F2] hover:bg-[#1877F2]/10" aria-label="Facebook Outline Icon Button">
    <span class="icon-[tabler--brand-facebook]"></span>
  </button>
  <button class="btn btn-square btn-outline text-[#1da1f2] hover:border-[#1da1f2] hover:bg-[#1da1f2]/10" aria-label="X Outline Icon Button">
    <span class="icon-[tabler--brand-x]"></span>
  </button>
  <button class="btn btn-circle btn-outline text-[#0a66c2] hover:border-[#0a66c2] hover:bg-[#0a66c2]/10" aria-label="Linkedin Outline Icon Button">
    <span class="icon-[tabler--brand-linkedin]"></span>
  </button>
  <button class="btn btn-circle btn-outline text-[#2b3137] hover:border-[#2b3137] hover:bg-[#2b3137]/10" aria-label="Github Outline Icon Button">
    <span class="icon-[tabler--brand-github]"></span>
  </button>
</div>

Loading buttons

Use loading component to add a loader to the button.

Refer Loading Element plugin for more details.

<button class="btn btn-square btn-primary" aria-label="Loading Button">
<span class="loading loading-spinner"></span>
</button>

<button class="btn btn-primary">
  <span class="loading loading-spinner"></span>
  loading
</button>

<div class="join">
  <button class="btn btn-soft btn-primary join-item">Button</button>
  <button class="btn btn-soft btn-primary join-item">Button</button>
  <button class="btn btn-soft btn-primary join-item">Button</button>
</div>

FlyonUI