ETR Component Library

button: Icon 

<a href="www.expandtheroom.com" class="button button--default button--icon">
    <span class="flex items-center">
      <?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<title>icon-chevron-left</title>
<g fill="none" fill-rule="evenodd">
<polyline transform="translate(20 20) scale(-1) rotate(-90) translate(-20 -20)" points="1 11.767 20 28.233 39 11.767" stroke-width="3"/>
<g transform="translate(27 -71)" fill-rule="nonzero">
<path d="m37.004 75.168c-0.348 0-0.692-0.084-1.004-0.264-0.616-0.36-0.996-1.024-0.996-1.736v-35.64l-33.724-33.276c-0.576-0.564-0.748-1.42-0.44-2.176 0.308-0.752 1.04-1.244 1.848-1.244h84.628c0.812 0 1.544 0.488 1.848 1.244 0.308 0.752 0.132 1.612-0.444 2.18l-33.716 33.272v26.52c0 0.724-0.388 1.388-1.008 1.74l-16 9.12c-0.308 0.176-0.652 0.26-0.992 0.26zm-29.44-70.336l30.844 30.436c0.38 0.376 0.596 0.888 0.596 1.416v33.036l12-6.84v-26.196c0-0.536 0.216-1.056 0.592-1.416l30.84-30.436h-74.872z"/>
</g>
</g>
</svg>

      Learn More
    </span>
  </a>

<a href="www.expandtheroom.com" class="button button--default button--default--hover button--icon ml-4 mb-4">
    <span class="flex items-center">
      <?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<title>icon-chevron-left</title>
<g fill="none" fill-rule="evenodd">
<polyline transform="translate(20 20) scale(-1) rotate(-90) translate(-20 -20)" points="1 11.767 20 28.233 39 11.767" stroke-width="3"/>
<g transform="translate(27 -71)" fill-rule="nonzero">
<path d="m37.004 75.168c-0.348 0-0.692-0.084-1.004-0.264-0.616-0.36-0.996-1.024-0.996-1.736v-35.64l-33.724-33.276c-0.576-0.564-0.748-1.42-0.44-2.176 0.308-0.752 1.04-1.244 1.848-1.244h84.628c0.812 0 1.544 0.488 1.848 1.244 0.308 0.752 0.132 1.612-0.444 2.18l-33.716 33.272v26.52c0 0.724-0.388 1.388-1.008 1.74l-16 9.12c-0.308 0.176-0.652 0.26-0.992 0.26zm-29.44-70.336l30.844 30.436c0.38 0.376 0.596 0.888 0.596 1.416v33.036l12-6.84v-26.196c0-0.536 0.216-1.056 0.592-1.416l30.84-30.436h-74.872z"/>
</g>
</g>
</svg>

      Hover
      </span>
  </a>
<a href="www.expandtheroom.com" class="button button--default button--default--active button--icon ml-4 mb-4">
    <span class="flex items-center">
      <?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<title>icon-chevron-left</title>
<g fill="none" fill-rule="evenodd">
<polyline transform="translate(20 20) scale(-1) rotate(-90) translate(-20 -20)" points="1 11.767 20 28.233 39 11.767" stroke-width="3"/>
<g transform="translate(27 -71)" fill-rule="nonzero">
<path d="m37.004 75.168c-0.348 0-0.692-0.084-1.004-0.264-0.616-0.36-0.996-1.024-0.996-1.736v-35.64l-33.724-33.276c-0.576-0.564-0.748-1.42-0.44-2.176 0.308-0.752 1.04-1.244 1.848-1.244h84.628c0.812 0 1.544 0.488 1.848 1.244 0.308 0.752 0.132 1.612-0.444 2.18l-33.716 33.272v26.52c0 0.724-0.388 1.388-1.008 1.74l-16 9.12c-0.308 0.176-0.652 0.26-0.992 0.26zm-29.44-70.336l30.844 30.436c0.38 0.376 0.596 0.888 0.596 1.416v33.036l12-6.84v-26.196c0-0.536 0.216-1.056 0.592-1.416l30.84-30.436h-74.872z"/>
</g>
</g>
</svg>

      Active
      </span>
  </a>
<a href="www.expandtheroom.com" class="button button--default focus button--icon ml-4 mb-4">
    <span class="flex items-center">
      <?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<title>icon-chevron-left</title>
<g fill="none" fill-rule="evenodd">
<polyline transform="translate(20 20) scale(-1) rotate(-90) translate(-20 -20)" points="1 11.767 20 28.233 39 11.767" stroke-width="3"/>
<g transform="translate(27 -71)" fill-rule="nonzero">
<path d="m37.004 75.168c-0.348 0-0.692-0.084-1.004-0.264-0.616-0.36-0.996-1.024-0.996-1.736v-35.64l-33.724-33.276c-0.576-0.564-0.748-1.42-0.44-2.176 0.308-0.752 1.04-1.244 1.848-1.244h84.628c0.812 0 1.544 0.488 1.848 1.244 0.308 0.752 0.132 1.612-0.444 2.18l-33.716 33.272v26.52c0 0.724-0.388 1.388-1.008 1.74l-16 9.12c-0.308 0.176-0.652 0.26-0.992 0.26zm-29.44-70.336l30.844 30.436c0.38 0.376 0.596 0.888 0.596 1.416v33.036l12-6.84v-26.196c0-0.536 0.216-1.056 0.592-1.416l30.84-30.436h-74.872z"/>
</g>
</g>
</svg>

      Focus
      </span>
  </a>
<a href="www.expandtheroom.com" class="button button--default button--default--disabled button--icon ml-4 mb-4">
    <span class="flex items-center">
      <?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<title>icon-chevron-left</title>
<g fill="none" fill-rule="evenodd">
<polyline transform="translate(20 20) scale(-1) rotate(-90) translate(-20 -20)" points="1 11.767 20 28.233 39 11.767" stroke-width="3"/>
<g transform="translate(27 -71)" fill-rule="nonzero">
<path d="m37.004 75.168c-0.348 0-0.692-0.084-1.004-0.264-0.616-0.36-0.996-1.024-0.996-1.736v-35.64l-33.724-33.276c-0.576-0.564-0.748-1.42-0.44-2.176 0.308-0.752 1.04-1.244 1.848-1.244h84.628c0.812 0 1.544 0.488 1.848 1.244 0.308 0.752 0.132 1.612-0.444 2.18l-33.716 33.272v26.52c0 0.724-0.388 1.388-1.008 1.74l-16 9.12c-0.308 0.176-0.652 0.26-0.992 0.26zm-29.44-70.336l30.844 30.436c0.38 0.376 0.596 0.888 0.596 1.416v33.036l12-6.84v-26.196c0-0.536 0.216-1.056 0.592-1.416l30.84-30.436h-74.872z"/>
</g>
</g>
</svg>

      Disabled
      </span>
  </a>
 
{{#if url}}
  <a href="{{url}}" class="button button--default button--icon">
    <span class="flex items-center">
      {{render '@icon-chevron-left'}}
      {{text}}
    </span>
  </a>
{{else}}
  <button class="button button--default">
    <span class="flex items-center"></span>
      {{render '@icon-chevron-left'}}
      {{text}}
    </span>
  </button>
{{/if}}

{{#if showStates}}
  <a href="{{url}}" class="button button--default button--default--hover button--icon ml-4 mb-4">
    <span class="flex items-center">
      {{render '@icon-chevron-left'}}
      Hover
      </span>
  </a>
  <a href="{{url}}" class="button button--default button--default--active button--icon ml-4 mb-4">
    <span class="flex items-center">
      {{render '@icon-chevron-left'}}
      Active
      </span>
  </a>
  <a href="{{url}}" class="button button--default focus button--icon ml-4 mb-4">
    <span class="flex items-center">
      {{render '@icon-chevron-left'}}
      Focus
      </span>
  </a>
  <a href="{{url}}" class="button button--default button--default--disabled button--icon ml-4 mb-4">
    <span class="flex items-center">
      {{render '@icon-chevron-left'}}
      Disabled
      </span>
  </a>
{{/if}}
 
{
  "text": "Learn More",
  "url": "www.expandtheroom.com",
  "showStates": true
}
  • Content: 
    .button {

  &:hover,
  &--default--hover,
  &--outline--hover {
    @apply shadow-lg;
  }

  &--default {
    @apply font-sans font-bold uppercase text-xs transition tracking-wider leading-none py-4 px-6 bg-primary text-white inline-block no-underline;
    padding-bottom: .875rem !important;

    &:hover, &--hover {
      @apply bg-primary-dark;
    }

    &:active, &--active, &--active:hover {
      @apply bg-primary-darker;
    }

    &--disabled, &:disabled {
      @apply bg-gray-dark pointer-events-none;
    }
  }

  &--icon {
    @apply pl-4;

    svg {
      @apply mr-2 w-4 h-auto stroke-current;
    }

    &--right {
        @apply pl-6 pr-4;

      svg {
        @apply mr-0 ml-2 w-4 h-auto stroke-current;
      }
    }
  }

  &--outline {
    @apply button--default bg-transparent text-primary border border-solid border-primary;

    &:hover, &--hover {
      @apply text-white bg-primary;
    }

    &:active, &--active, &--active:hover {
      @apply bg-primary-dark border-primary-dark text-white;
    }

    &--disabled, &:disabled {
      @apply bg-gray-dark border-gray-dark pointer-events-none text-white;
    }

    &.button--white {
      @apply text-white border-white;

      &:hover, &.button--outline--hover {
        @apply text-white bg-primary-light border-primary-light;
      }

      &:active, &.button--outline--active, &.button--outline--active:hover {
        @apply bg-primary-dark;
      }
    }
  }

  &:not([disabled]).focus, &:not([disabled]):focus {
    box-shadow: 0 0 0 3px theme('colors.primary.transparent');

    &.rounded {
      outline: 0;
      &:after {
        content:'';
        @apply block bg-primary-light rounded;
      }
    }

    &.rounded-full {
      outline: 0;
      box-shadow: 0 0 0 3px theme('colors.primary.transparent');
    }
  }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: components/01-base-components/button/button.scss
  • Size: 1.8 KB

There are no notes for this item.