Button States

Multi-state button elements.

How to

The button states component is used to animate a button element from one state to another. States can act as feedback hint (e.g., success message), or indicate the status of a process (e.g., loading info).

To content of each state should be wrapped into a separate inline element. Then you should use Javascript to add the .btn-states--state-b class to the button, thus replacing the first content with the second one.

Three states button #

If you want to create a three state button, update the SCSS of the component using the following snippet:

.btn-states {
  position: relative;
}

.btn-states--state-b:not(.btn-states--preserve-width) .btn-states__content-a,
.btn-states--state-c:not(.btn-states--preserve-width) .btn-states__content-a {
  display: none;
}

.btn-states:not(.btn-states--state-b) .btn-states__content-b,
.btn-states:not(.btn-states--state-c) .btn-states__content-c {
  display: none;
}

/* preserve button width when switching from state A to state B to state C */
.btn-states--preserve-width {
  .btn-states__content-b,
  .btn-states__content-c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &.btn-states--state-b .btn-states__content-a,
  &.btn-states--state-c .btn-states__content-a {
    visibility: hidden;
  }
}

In the HTML, make sure to add a .btn-states__content-c element:

<button class="btn-states">
  <span class="btn-states__content-a">
    <!-- state A -->
  </span>

  <span class="btn-states__content-b">
    <!-- state B -->
  </span>

  <span class="btn-states__content-c">
    <!-- state C -->
  </span>
</button>

Categories

• Controls

Bug report & feedback

Component Github page ↗