Buttons

Class

FilledOutlineTonalTextX-Large

Label

States

EnabledHoverFocusedPressedDisabled

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-filled">Label</button>
        </div>
    </div>
</div>

  .button-filled {
    background-color: var(--token-button-filled-bg);
    color: var(--token-button-filled-text);



    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-filled hover">Label</button>
        </div>
    </div>
</div>

  .button-filled {
    background-color: var(--token-button-filled-bg);
    color: var(--token-button-filled-text);



    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-filled focus">Label</button>
        </div>
    </div>
</div>

  .button-filled {
    background-color: var(--token-button-filled-bg);
    color: var(--token-button-filled-text);



    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-filled pressed">Label</button>
        </div>
    </div>
</div>

  .button-filled {
    background-color: var(--token-button-filled-bg);
    color: var(--token-button-filled-text);



    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-filled"disabled>Label</button>
        </div>
    </div>
</div>

  .button-filled {
    background-color: var(--token-button-filled-bg);
    color: var(--token-button-filled-text);



    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

States

EnabledHoverFocusedPressedDisabled

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-outline">Label</button>
        </div>
    </div>
</div>

  .button-outline {
    background-color: transparent;
    border: 1px solid var(--token-button-outline-border);
    color: var(--token-button-outline-text);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      border-color: var(--token-outline-variant);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-outline hover">Label</button>
        </div>
    </div>
</div>

  .button-outline {
    background-color: transparent;
    border: 1px solid var(--token-button-outline-border);
    color: var(--token-button-outline-text);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      border-color: var(--token-outline-variant);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-outline focus">Label</button>
        </div>
    </div>
</div>

  .button-outline {
    background-color: transparent;
    border: 1px solid var(--token-button-outline-border);
    color: var(--token-button-outline-text);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      border-color: var(--token-outline-variant);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-outline pressed">Label</button>
        </div>
    </div>
</div>

  .button-outline {
    background-color: transparent;
    border: 1px solid var(--token-button-outline-border);
    color: var(--token-button-outline-text);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      border-color: var(--token-outline-variant);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-outline"disabled>Label</button>
        </div>
    </div>
</div>

  .button-outline {
    background-color: transparent;
    border: 1px solid var(--token-button-outline-border);
    color: var(--token-button-outline-text);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      border-color: var(--token-outline-variant);
      color: var(--token-button-disabled-text);
    }
  }

Label

States

EnabledHoverFocusedPressedDisabled

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-tonal">Label</button>
        </div>
    </div>
</div>

  .button-tonal {
    background-color: var(--token-button-tonal-bg);
    color: var(--token-button-tonal-text);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-tonal hover">Label</button>
        </div>
    </div>
</div>

  .button-tonal {
    background-color: var(--token-button-tonal-bg);
    color: var(--token-button-tonal-text);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-tonal focus">Label</button>
        </div>
    </div>
</div>

  .button-tonal {
    background-color: var(--token-button-tonal-bg);
    color: var(--token-button-tonal-text);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-tonal pressed">Label</button>
        </div>
    </div>
</div>

  .button-tonal {
    background-color: var(--token-button-tonal-bg);
    color: var(--token-button-tonal-text);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-tonal"disabled>Label</button>
        </div>
    </div>
</div>

  .button-tonal {
    background-color: var(--token-button-tonal-bg);
    color: var(--token-button-tonal-text);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

States

EnabledHoverFocusedPressedDisabled

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-text">Label</button>
        </div>
    </div>
</div>

  .button-text {
    background-color: transparent;
    color: var(--token-button-text-color);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-text hover">Label</button>
        </div>
    </div>
</div>

  .button-text {
    background-color: transparent;
    color: var(--token-button-text-color);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-text focus">Label</button>
        </div>
    </div>
</div>

  .button-text {
    background-color: transparent;
    color: var(--token-button-text-color);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-text pressed">Label</button>
        </div>
    </div>
</div>

  .button-text {
    background-color: transparent;
    color: var(--token-button-text-color);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-text" disabled>Label</button>
        </div>
    </div>
</div>

  .button-text {
    background-color: transparent;
    color: var(--token-button-text-color);

    &:hover,
    &.hover {
      &::after {
        background-color: var(--token-state-hover-layer);
      }
    }

    &:focus-visible,
    &.focus {
      &::after {
        background-color: var(--token-state-focus-layer);
      }
    }

    &:active,
    &.pressed {
      &::after {
        background-color: var(--token-state-pressed-layer);
      }
    }

    &:disabled,
    &.disabled {
      background-color: var(--token-button-disabled-bg);
      color: var(--token-button-disabled-text);
    }
  }

Label

States

EnabledHoverFocusedPressedDisabled

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-tonal button-xl">Label</button>
        </div>
    </div>
</div>

  .button-xl {
    font-size: 1.5rem;
    padding: 1.5rem 2rem;
    height: auto;
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-tonal button-xl hover">Label</button>
        </div>
    </div>
</div>

  .button-xl {
    font-size: 1.5rem;
    padding: 1.5rem 2rem;
    height: auto;
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-tonal button-xl focus">Label</button>
        </div>
    </div>
</div>

  .button-xl {
    font-size: 1.5rem;
    padding: 1.5rem 2rem;
    height: auto;
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-tonal button-xl pressed">Label</button>
        </div>
    </div>
</div>

  .button-xl {
    font-size: 1.5rem;
    padding: 1.5rem 2rem;
    height: auto;
  }

Label

Code

HTMLCSS

<div data-theme>
    <div class="btn-grid-1">
        <div class="grid-items">
            <button class="button button-tonal button-xl"disabled>Label</button>
        </div>
    </div>
</div>

  .button-xl {
    font-size: 1.5rem;
    padding: 1.5rem 2rem;
    height: auto;
  }

---