Tailwind CSS Button

Class Name	Type	Description
btn	Component	Base class for the button component.
btn-soft	Style	Soft colored button.
btn-outline	Style	Transparent button with colored border.
btn-gradient	Style	Gradient button
btn-primary	Color	Button with ‘primary’ color.
btn-secondary	Color	Button with ‘secondary’ color.
btn-accent	Color	Button with ‘accent’ color.
btn-info	Color	Button with ‘info’ color.
btn-success	Color	Button with ‘success’ color.
btn-warning	Color	Button with ‘warning’ color.
btn-error	Color	Button with ’error’ color.
btn-active	State	Force button to show active state.
btn-disabled	State	Force button to show disabled state.
btn-xs	Size	Button with extra small size.
btn-sm	Size	Button with small size.
btn-md	Size	Button with medium(Default) size.
btn-lg	Size	Button with large size.
btn-xl	Size	Button with extra large size.
glass	Modifier	Button with a glass effect.
btn-wide	Modifier	Wide button (max-w-64).
btn-block	Modifier	Full width button.
btn-circle	Modifier	Circle button with a 1:1 ratio.
btn-square	Modifier	Square button with a 1:1 ratio.

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>

Wave effect button

Add modifier class waves for wave effect in buttons.

Refer Wave Effect plugin for more details.

<button class="btn btn-primary waves waves-light">Primary</button>
<button class="btn btn-soft btn-primary waves waves-primary">Primary</button>
<button class="btn btn-outline btn-primary waves waves-primary">Primary</button>
<button class="btn btn-text btn-primary waves waves-primary">Primary</button>
<button class="btn btn-gradient btn-primary waves waves-light">Primary</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>
<button class="btn btn-gradient btn-primary rounded-full">Primary</button>

Rounded buttons

This is the default shape of button.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-soft btn-primary">Primary</button>
<button class="btn btn-outline btn-primary">Primary</button>
<button class="btn btn-gradient btn-primary">Primary</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|md|lg|xl for button of different sizes.

For medium size button, use component class `btn`.

<button class="btn btn-primary btn-xs">Tiny</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-xl">Extra Large</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.

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] size-4.5 shrink-0"></span> Primary </button>
  <button class="btn btn-soft btn-primary"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span> Primary </button>
  <button class="btn btn-outline btn-primary"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span> Primary </button>
  <button class="btn btn-gradient btn-primary"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span> Primary </button>
</div>

<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-primary"> Primary <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
  <button class="btn btn-soft btn-primary"> Primary <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
  <button class="btn btn-outline btn-primary"> Primary <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
  <button class="btn btn-gradient btn-primary"> Primary <span class="icon-[tabler--star] size-4.5 shrink-0"></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] size-4.5 shrink-0"></span></button>
<button class="btn btn-square btn-soft btn-primary" aria-label="Soft Icon Button"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
<button class="btn btn-square btn-outline btn-primary" aria-label="Outline Icon Button"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
<button class="btn btn-square btn-gradient btn-primary" aria-label="Gradient Icon Button"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
<button class="btn btn-circle btn-primary" aria-label="Circle Icon Button"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
<button class="btn btn-circle btn-soft btn-primary" aria-label="Circle Soft Icon Button"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
<button class="btn btn-circle btn-outline btn-primary" aria-label="Circle Outline Icon Button"> <span class="icon-[tabler--star] size-4.5 shrink-0"></span></button>
<button class="btn btn-circle btn-gradient btn-primary" aria-label="Circle Gradient Icon Button"> <span class="icon-[tabler--star] size-4.5 shrink-0"></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" />

Use the following sample code to build custom Social, Payment, and other types of buttons. This example also demonstrates how to create a custom button using two variables: --btn-color and --btn-fg.

<!-- Solid -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn [--btn-color:#1877F2] text-white" >
    <span class="icon-[tabler--brand-facebook] size-4.5 shrink-0"></span> Facebook
  </button>
  <button class="btn [--btn-color:#000] text-white" >
    <span class="icon-[tabler--brand-x] size-4.5 shrink-0"></span> Twitter
  </button>
  <button class="btn [--btn-color:#0a66c2] text-white" >
    <span class="icon-[tabler--brand-linkedin] size-4.5 shrink-0"></span> LinkedIn
  </button>
  <button class="btn [--btn-color:#2b3137] text-white" >
    <span class="icon-[tabler--brand-github] size-4.5 shrink-0"></span> Github
  </button>
</div>

<!-- Soft -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-soft [--btn-color:#1877F2]">
    <span class="icon-[tabler--brand-facebook] size-4.5 shrink-0"></span> Facebook
  </button>
  <button class="btn btn-soft [--btn-color:#000]">
    <span class="icon-[tabler--brand-x] size-4.5 shrink-0"></span> Twitter
  </button>
  <button class="btn btn-soft [--btn-color:#0a66c2]">
    <span class="icon-[tabler--brand-linkedin] size-4.5 shrink-0"></span> LinkedIn
  </button>
  <button class="btn btn-soft [--btn-color:#2b3137]">
    <span class="icon-[tabler--brand-github] size-4.5 shrink-0"></span> Github
  </button>
</div>

<!-- Outline -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-outline [--btn-color:#1877F2]">
    <span class="icon-[tabler--brand-facebook] size-4.5 shrink-0"></span> Facebook
  </button>
  <button class="btn btn-outline [--btn-color:#000]">
    <span class="icon-[tabler--brand-x] size-4.5 shrink-0"></span> Twitter
  </button>
  <button class="btn btn-outline [--btn-color:#0a66c2]">
    <span class="icon-[tabler--brand-linkedin] size-4.5 shrink-0"></span> LinkedIn
  </button>
  <button class="btn btn-outline [--btn-color:#2b3137]">
    <span class="icon-[tabler--brand-github] size-4.5 shrink-0"></span> Github
  </button>
</div>

<!-- Text -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-text [--btn-color:#1877F2]">
    <span class="icon-[tabler--brand-facebook] size-4.5 shrink-0"></span> Facebook
  </button>
  <button class="btn btn-text [--btn-color:#000]">
    <span class="icon-[tabler--brand-x] size-4.5 shrink-0"></span> Twitter
  </button>
  <button class="btn btn-text [--btn-color:#0a66c2]">
    <span class="icon-[tabler--brand-linkedin] size-4.5 shrink-0"></span> LinkedIn
  </button>
  <button class="btn btn-text [--btn-color:#2b3137]">
    <span class="icon-[tabler--brand-github] size-4.5 shrink-0"></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  [--btn-color:#1877F2] text-white" aria-label="Facebook Icon Button" >
    <span class="icon-[tabler--brand-facebook] size-4.5 shrink-0"></span>
  </button>
  <button class="btn btn-square  [--btn-color:#000] text-white" aria-label="X Icon Button" >
    <span class="icon-[tabler--brand-x] size-4.5 shrink-0"></span>
  </button>
  <button class="btn btn-circle  [--btn-color:#0a66c2] text-white" aria-label="Linkedin Icon Button" >
    <span class="icon-[tabler--brand-linkedin] size-4.5 shrink-0"></span>
  </button>
  <button class="btn btn-circle  [--btn-color:#2b3137] text-white" aria-label="Github Icon Button" >
    <span class="icon-[tabler--brand-github] size-4.5 shrink-0"></span>
  </button>
</div>

<!-- Soft -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-square btn-soft [--btn-color:#1877F2]" aria-label="Facebook Soft Icon Button">
    <span class="icon-[tabler--brand-facebook] size-4.5 shrink-0"></span>
  </button>
  <button class="btn btn-square btn-soft [--btn-color:#000]" aria-label="X Soft Icon Button">
    <span class="icon-[tabler--brand-x] size-4.5 shrink-0"></span>
  </button>
  <button class="btn btn-circle btn-soft [--btn-color:#0a66c2]" aria-label="Linkedin Soft Icon Button">
    <span class="icon-[tabler--brand-linkedin] size-4.5 shrink-0"></span>
  </button>
  <button class="btn btn-circle btn-soft [--btn-color:#2b3137]" aria-label="Github Soft Icon Button">
    <span class="icon-[tabler--brand-github] size-4.5 shrink-0"></span>
  </button>
</div>

<!-- Outline -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-square btn-outline [--btn-color:#1877F2]" aria-label="Facebook Outline Icon Button">
    <span class="icon-[tabler--brand-facebook] size-4.5 shrink-0"></span>
  </button>
  <button class="btn btn-square btn-outline [--btn-color:#000]" aria-label="X Outline Icon Button">
    <span class="icon-[tabler--brand-x] size-4.5 shrink-0"></span>
  </button>
  <button class="btn btn-circle btn-outline [--btn-color:#0a66c2]" aria-label="Linkedin Outline Icon Button">
    <span class="icon-[tabler--brand-linkedin] size-4.5 shrink-0"></span>
  </button>
  <button class="btn btn-circle btn-outline [--btn-color:#2b3137]" aria-label="Github Outline Icon Button">
    <span class="icon-[tabler--brand-github] size-4.5 shrink-0"></span>
  </button>
</div>

<!-- Text -->
<div class="flex w-full flex-wrap gap-2">
  <button class="btn btn-square btn-text [--btn-color:#1877F2]" aria-label="Facebook Outline Icon Button">
    <span class="icon-[tabler--brand-facebook] size-4.5 shrink-0"></span>
  </button>
  <button class="btn btn-square btn-text [--btn-color:#1da1f2]" aria-label="X Outline Icon Button">
    <span class="icon-[tabler--brand-x] size-4.5 shrink-0"></span>
  </button>
  <button class="btn btn-circle btn-text [--btn-color:#0a66c2]" aria-label="Linkedin Outline Icon Button">
    <span class="icon-[tabler--brand-linkedin] size-4.5 shrink-0"></span>
  </button>
  <button class="btn btn-circle btn-text [--btn-color:#2b3137]" aria-label="Github Outline Icon Button">
    <span class="icon-[tabler--brand-github] size-4.5 shrink-0"></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>

Glass button

Use class glass to create a button with glass effect.

Dashed buttons

You can achieve this style by combining the border-dashed utility class with the btn-outline modifier class.

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

Button group

Group a series of buttons together on a single line or stack them in a vertical/horizontal column

Refer the Join component documentation for creating a group of buttons.

<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