Button
Buttons allow users to take actions, and make choices, with a single tap.
Add
.btn
class in a button element for a simple button. Add variants to give it color, size and hover effects.
Three different sizes provided. Just add the following class to
.btn
element:
.btn--sm
for smallest, default is
.btn--md
with largest size being
.btn--lg
.

  <button className="btn btn--sm text-white bg-blue-400">
    Submit
  </button>
  <button className="btn btn--md text-white bg-blue-500">
    Submit
  </button>
  <button className="btn btn--lg text-white bg-blue-600">
    Search
  </button>
Default button has no rounded edges. Add
.btn--rounded
class to
.btn
to get rounded edges. To get pill shaped button use
.btn--pill
.

  <button className="btn btn--sm text-white bg-blue-500">
    Submit
  </button>
  <button className="btn btn--sm btn--rounded text-white bg-blue-500">
    Submit
  </button>
  <button className="btn btn--sm btn--pill text-white bg-blue-600">
    Search
  </button>
There are eight preset variants.
.btn--default
,
.btn--danger
,
.btn--success
,
.btn--dark
,
.btn--blue
,
.btn--yellow
,
.btn--black
and
.btn--white
. Preset variant colors have hover effects as well.

  <button className="btn btn--rounded btn--sm btn--default">
    Submit
  </button>
  <button className="btn btn--rounded btn--sm btn--danger ">
    Submit
  </button>
  <button className="btn btn--rounded btn--sm btn--success ">
    Search
  </button>
  <button className="btn btn--rounded btn--sm btn--dark">
    Search
  </button>
  <button className="btn btn--rounded btn--sm btn--blue">
    Search
  </button>
  <button className="btn btn--rounded btn--sm btn--yellow">
    Search
  </button>
  <button className="btn btn--rounded btn--sm btn--black">
    Search
  </button>
  <button className="btn btn--rounded btn--sm btn--white">
    Search
  </button>
Buttons by default have box-shadow enabled. To remove add
.btn--no-shadow
class to
.btn
.

  <button className="btn btn--sm btn--rounded btn--no-shadow btn--blue">
    Submit
  </button>
  <button className="btn btn--sm btn--rounded btn--no-shadow btn--dark">
    Submit
  </button>
  <button className="btn btn--sm btn--rounded btn--no-shadow btn--default">
    Search
  </button>
To use the outlined variant, add
.btn--outlined
class to
.btn
.

  <button className="btn btn--sm btn--rounded btn--outlined btn--default text-white">
    Submit
  </button>
  <button className="btn btn--sm btn--rounded btn--outlined btn--danger text-white">
    Search
  </button>
  <button className="btn btn--sm btn--rounded btn--outlined btn--success text-white">
    Submit
  </button>
  <button className="btn btn--sm btn--rounded btn--outlined btn--dark text-white">
    Search
  </button>
  <button className="btn btn--sm btn--rounded btn--outlined btn--blue text-white">
    Search
  </button>
  <button className="btn btn--sm btn--rounded btn--outlined btn--yellow text-white">
    Search
  </button>
  <button className="btn btn--sm btn--rounded btn--outlined btn--black text-white">
    Search
  </button>
  <button className="btn btn--sm btn--rounded btn--outlined btn--white text-white">
    Search
  </button>
To style link/text buttons, add
.btn--link
to
.btn
.

  <button className="btn btn--sm btn--rounded btn--link text-black">
    Subscribe
  </button>
  <button className="btn btn--sm btn--rounded btn--link text-black">
    Submit
  </button>
  <button className="btn btn--sm btn--rounded btn--link text-black">
    Search
  </button>
Create a button with icon and label by adding a div with class
.btn__icon
that wraps an img/svg inside
.btn
. Depending on position of
.btn__icon
the icon will be positioned first or last.

  <button className="btn btn--sm btn--rounded btn--danger">
    <div className="btn__icon icon-sm">
      <svg
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 24 24"
      >
        <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
      </svg>
    </div>
    Delete
  </button>
  <button className="btn btn--sm btn--rounded btn--yellow">
    Delete
    <div className="btn__icon icon-sm">
      <svg
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 24 24"
      >
        <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
      </svg>
    </div>
  </button>
To get buttons with only icon, add
.btn--icon
class to
.btn
and put an img/svg inside. Use
.btn--icon-circle
or
.btn--icon-rounded
for round edges.

  <button className="btn btn--icon-circle btn--sm btn--rounded">
    <svg
      aria-hidden="true"
      className="icon-sm fill-black"
      focusable="false"
      viewBox="0 0 24 24"
    >
      <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
    </svg>
  </button>
To show that a button is disabled, add
.btn--disabled
class.

  <button className="btn btn--rounded btn--sm btn--blue btn--disabled">
    Submit
  </button>
  <button className="btn btn--rounded btn--sm btn--danger btn--disabled">
    Submit
  </button>
  <button className="btn btn--rounded btn--sm btn--success btn--disabled">
    Search
  </button>
Text-button utility#
To change text style of button to preset style, add
.text-button
.

  <button className="btn btn--rounded btn--sm btn--danger text-button ">
    Submit
  </button>
  <button className="btn btn--rounded btn--sm btn--success text-button ">
    Search
  </button>
  <button className="btn btn--rounded btn--sm btn--blue text-button">
    Search
  </button>
  <button className="btn btn--rounded btn--sm btn--yellow text-button">
    Search
  </button>
On this page