Metronic - Tailwind CSS Button

A basic button examples with available color options.

				
					<button class="btn btn-light">
 Light
</button>
<button class="btn btn-secondary">
 Secondary
</button>
<button class="btn btn-primary">
 Primary
</button>
<button class="btn btn-success">
 Success
</button>
<button class="btn btn-info">
 Info
</button>
<button class="btn btn-danger">
 Danger
</button>
<button class="btn btn-warning">
 Warning
</button>
<button class="btn btn-dark">
 Dark
</button>

Apply the .btn-outline class to apply an outlined style to buttons.

Preview HTML

				
					<button class="btn btn-outline btn-primary">
 Primary
</button>
<button class="btn btn-outline btn-success">
 Success
</button>
<button class="btn btn-outline btn-info">
 Info
</button>
<button class="btn btn-outline btn-danger">
 Danger
</button>
<button class="btn btn-outline btn-warning">
 Warning
</button>

Use the .btn-clear class to give buttons a default transparent background style.

Preview HTML

				
					<button class="btn btn-clear btn-light">
 Light
</button>
<button class="btn btn-clear btn-primary">
 Primary
</button>
<button class="btn btn-clear btn-success">
 Success
</button>
<button class="btn btn-clear btn-info">
 Info
</button>
<button class="btn btn-clear btn-danger">
 Danger
</button>
<button class="btn btn-clear btn-warning">
 Warning
</button>

Use KeenIcons with buttons to enhance buttons with icons.

Preview HTML

				
					<button class="btn btn-primary">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Primary
</button>
<button class="btn btn-success">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Success
</button>
<button class="btn btn-info">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Info
</button>
<button class="btn btn-danger">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Danger
</button>
<button class="btn btn-warning">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Warning
</button>
<button class="btn btn-dark">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Dark
</button>
<button class="btn btn-secondary">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Secondary
</button>
<button class="btn btn-light">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Light
</button>

Use the .btn-outline class to apply an outlined style to buttons with icons.

Preview HTML

				
					<button class="btn btn-outline btn-primary">
 Primary
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-outline btn-success">
 Success
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-outline btn-info">
 Info
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-outline btn-danger">
 Danger
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-outline btn-warning">
 Warning
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>

Use the .btn-clear class to give buttons with icons a default transparent background style.

Preview HTML

				
					<button class="btn btn-clear btn-light">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Light
</button>
<button class="btn btn-clear btn-primary">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Primary
</button>
<button class="btn btn-clear btn-success">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Success
</button>
<button class="btn btn-clear btn-info">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Info
</button>
<button class="btn btn-clear btn-danger">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Danger
</button>
<button class="btn btn-clear btn-warning">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
 Warning
</button>

Use the .btn-icon class to create an icon-only button.

Preview HTML

				
					<button class="btn btn-icon btn-primary">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-success">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-info">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-danger">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-warning">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-dark">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-secondary">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-light">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>

Use the .btn-icon and .btn-outline classes to apply an outlined style to buttons with icons.

Preview HTML

				
					<button class="btn btn-icon btn-outline btn-primary">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-outline btn-success">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-outline btn-info">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-outline btn-danger">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-outline btn-warning">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>

Use the .btn-icon and .btn-clear classes to give button icons a default transparent background style.

Preview HTML

				
					<button class="btn btn-icon btn-clear btn-light">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-clear btn-primary">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-clear btn-success">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-clear btn-info">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-clear btn-danger">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon btn-clear btn-warning">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>

Use the .rounded-full class to create a circle button.

Preview HTML

				
					<button class="btn btn-icon rounded-full btn-primary">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon rounded-full btn-outline btn-primary">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>
<button class="btn btn-icon rounded-full btn-clear btn-primary">
 <i '="" 'outline'}="" class="ki-{" default':="" ki-plus-squared="">
 </i>
</button>

Make buttons look inactive by adding the disabled attribute.

Preview HTML

				
					<button class="btn btn-primary" disabled="">
 Default
</button>
<button class="btn btn-outline btn-primary" disabled="">
 Outline
</button>
<button class="btn btn-light" disabled="">
 Light
</button>
<button class="btn btn-secondary" disabled="">
 Secondary
</button>
<button class="btn btn-clear btn-primary" disabled="">
 Clear
</button>

To change the button size to extra small, small, and large, use the classes .btn-xs, .btn-sm and .btn-lg respectively.

Preview HTML

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

To apply a hyperlink style to buttons, use the .btn-link class.

Preview HTML

				
					<button class="btn btn-link btn-sm">
 Small link
</button>
<button class="btn btn-link">
 Default link
</button>
<button class="btn btn-link btn-lg">
 Large link
</button>

A button group that can be used as tabs.

Preview HTML

				
					<div class="btn-tabs btn-tabs-sm">
 <button class="btn btn-icon active">
  <i '="" 'outline'}="" class="ki-{" default':="" ki-element-11="">
  </i>
 </button>
 <button class="btn btn-icon">
  <i '="" 'outline'}="" class="ki-{" default':="" ki-row-horizontal="">
  </i>
 </button>
</div>
<div class="btn-tabs">
 <button class="btn btn-icon active">
  <i '="" 'outline'}="" class="ki-{" default':="" ki-element-11="">
  </i>
 </button>
 <button class="btn btn-icon">
  <i '="" 'outline'}="" class="ki-{" default':="" ki-row-horizontal="">
  </i>
 </button>
</div>
<div class="btn-tabs btn-tabs-lg">
 <button class="btn btn-icon active">
  <i '="" 'outline'}="" class="ki-{" default':="" ki-element-11="">
  </i>
 </button>
 <button class="btn btn-icon">
  <i '="" 'outline'}="" class="ki-{" default':="" ki-row-horizontal="">
  </i>
 </button>
</div>

The following source file manages the CSS styles of the Tailwind CSS Button component. Upon building the assets using Webpack Build Tools, the below file is compiled and added into the dist/assets/css/styles.css bundle, making it available globally across all pages.

File	Description
`src/core/plugins/components/btn.js`	The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Button component.

Getting Started

Customization

Base Components

Navigation

Forms

Plugins

Tailwind CSS Button

Default Button

Outline

Clear

With Icon - Default

With Icon - Outline

With Icon - Clear

Icon Only - Default

Icon Only - Outline

Icon Only - Clear

Circle

Disabled

Sizes

Link

Tabs

Source Code

On This Page