Button States

Any component that renders a button should have the following states: activated, disabled, focused, hover. It should also have a Ripple Effect component added for Material Design.

Component Structure

JavaScript

A component that renders a native button should use the following structure:

<Host>
  <button class="button-native">
    <span class="button-inner">
      <slot></slot>
    </span>
  </button>
</Host>

Any other attributes and classes that are included are irrelevant to the button states, but it's important that this structure is followed and the classes above exist. In some cases they may be named something else that makes more sense, such as in item.

CSS

A mixin called button-state() has been added to make it easier to setup the states in each component.

@mixin button-state() {
  @include position(0, 0, 0, 0);

  position: absolute;

  content: "";

  opacity: 0;
}

The following styles should be set for the CSS to work properly. Note that the button-state() mixin is included in the ::after pseudo element of the native button.

.button-native {
  /**
   * All other CSS in this selector is irrelevant to button states
   * but the following are required styles
   */

  position: relative;

  overflow: hidden;
}

.button-native::after {
  @include button-state();
}

.button-inner {
  /**
   * All other CSS in this selector is irrelevant to button states
   * but the following are required styles
   */

  position: relative;

  z-index: 1;
}