Button

A clickable form controller component.

Properties#

Features#

default#

Default Button

<button class="button" type="button">Button</button>
<input class="button" type="button" value="Button" />
<a class="button" href="#">Button</a>

default disabled#

Disabled Button

<button class="button disabled" type="button" disabled>Disabled Button</button>

rounded & outline#

Rounded

.button {
  @apply rounded-full;
  @apply text-gray-700;
  @apply border border-solid border-gray-700;
}

<button class="button shadow text-gray-700 border border-solid border-gray-700" type="button">Rounded</button>

background & hover#

Background Gray

.button {
  @apply text-gray-700;
  @apply bg-gray-300;
  @apply hover:bg-gray-500;
  @apply transition-colors duration-150;
}

<button class="button text-gray-700 bg-gray-300 hover:bg-gray-500 transition-colors duration-150" type="button">Background Gray</button>

with icon#

Search

.button {
  @apply text-gray-700;
  @apply border border-solid border-gray-700;
  @apply inline-flex items-center;
}

<button class="button text-gray-700 border border-solid border-gray-700 inline-flex items-center justify-center" type="button">
  <i class="icon icon-search mr-1"></i>Search
</button>