Button

Guidance

This button component provides a means of standardising buttons within other components. Buttons with text only, text plus icons and icons only are supported. These buttons are fully configurable via their context parameters.

When to use

Use whenever a button is required to trigger an action.

When not to use

Do not use in any form of navigation or to act as a link to another page.

Developer guidance

Configuration parameters:

Name Type Required/Optional Description
type string Required Button, submit or reset
content string Required Visible text. Also specify for icon only buttons for
style string Optional Primary, secondary or bright*
icon string Optional Mdi icon name
disabled boolean Optional If true, disables the button
icon_after boolean Optional If true, icon appears after text
icon_only boolean Optional If true, icon only appears
large_icon boolean Optional If true, icon appears large

*Bright should only be used for “icon_only” instances.

<button {% if id %}id="{{ id }}"{% endif %}
    {% if name %}name="{{ name }}"{% endif %}
    class="uol-button uol-button--{{ style }}
    {% if icon %}
      uol-icon uol-icon--{{ icon }}
      {{ 'uol-icon--position-after' if icon_after }}
      {{ 'uol-icon--icon-only' if icon_only }}
      {{ 'uol-icon--icon-only--large' if large_icon }}
    {% endif %}"
  type="{{ type }}"
  {{ 'disabled' if disabled }}
>{{ content }}</button>
<!-- Default -->
<button class="uol-button uol-button--
    " type="button">Contact</button>

<!-- Primary -->
<button class="uol-button uol-button--primary
    " type="button">Contact</button>

<!-- Secondary -->
<button class="uol-button uol-button--secondary
    " type="button">Contact</button>

<!-- Disabled -->
<button class="uol-button uol-button--
    " type="button" disabled>Contact</button>

<!-- Icon -->
<button class="uol-button uol-button--
    
      uol-icon uol-icon--mdiArrowRight
      
      
      
    " type="button">Contact</button>

<!-- Icon After -->
<button class="uol-button uol-button--
    
      uol-icon uol-icon--mdiArrowRight
      uol-icon--position-after
      
      
    " type="button">Contact</button>

<!-- Icon Only -->
<button class="uol-button uol-button--
    
      uol-icon uol-icon--mdiArrowRight
      
      uol-icon--icon-only
      
    " type="button">Contact</button>

<!-- Icon Only Large -->
<button class="uol-button uol-button--
    
      uol-icon uol-icon--mdiArrowRight
      
      uol-icon--icon-only
      uol-icon--icon-only--large
    " type="button">Contact</button>

<!-- Icon Only Bright -->
<button class="uol-button uol-button--bright
    
      uol-icon uol-icon--mdiArrowRight
      
      uol-icon--icon-only
      uol-icon--icon-only--large
    " type="button">Contact</button>

<!-- With Id -->
<button id="some-unique-button-id" class="uol-button uol-button--primary
    " type="button">Contact</button>

<!-- With Name -->
<button name="button-name" class="uol-button uol-button--primary
    " type="button">Contact</button>

<!-- Type Submit -->
<button class="uol-button uol-button--
    " type="submit">Submit</button>

<!-- Type Reset -->
<button class="uol-button uol-button--
    " type="reset">Reset</button>

  • Content:
    .uol-button {
      @include font-size-responsive(1.125rem, 1.125rem, 1.25rem);
      @include button_ripple($color-black);
      @include button_focus(-6px, $radius: 9px);
    
      line-height: 1;
      box-sizing: border-box;
      min-width: 10rem;
      border: 0;
      padding: 0.8em 1.8em;
      border: 2px solid $color-black;
      border-radius: 6px;
      color: $color-white;
      background-position: center;
      text-decoration: none;
      transition: background 0.5s ease;
    
      @media (-ms-high-contrast: active) {
        border: 1px solid WindowText;
      }
    
      &:hover,
      &:active {
        text-decoration: none;
        box-shadow: 0 3px 6px 0 rgba($color-black, 0.15), 0 2px 4px 0 rgba($color-black, 0.12);
      }
    
      &:active {
        background-color: lighten($color-black, 20%);
        background-size: 100%;
        transition: background 0s;
      }
    
      &:disabled {
        color: $color-grey--medium;
        background: $color-grey;
        border: 0.125rem solid darken($color-white, 6%);
    
        &:hover {
          box-shadow: none;
          cursor: not-allowed;
        }
      }
    
      .js & {
    
        &.uol-icon {
          padding: 0.8em 2.2em;
    
          svg {
            margin-top: 0;
          }
        }
    
        &.uol-icon--icon-only {
          @include button_focus(-6px, $radius: 50%);
    
          min-width: 0;
          border-radius: 50%;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 2.81rem;
          height: 2.81rem;
          min-height: 2.81rem;
    
          @include media(">=uol-media-l") {
            width: 3.12rem;
            height: 3.12rem;
          }
    
          svg {
            position: absolute;
          }
        }
    
        &.uol-icon--icon-only--large {
          svg {
            transform: scale(1.4);
          }
        }
      }
    }
    
      .uol-button--primary {
        @include button_ripple($color-brand-2--dark);
    
        border-color: $color-brand-2--dark;
    
        &:active {
          background-color: lighten($color-brand-2--dark, 7%);
        }
      }
    
      .uol-button--secondary {
        @include button_ripple($color-white);
    
        color: $color-brand-2--dark;
        border-color: $color-brand-2--dark;
    
        &:active {
          background-color: darken($color-white, 10%);
        }
      }
    
      .uol-button--bright {
        @include button_ripple($color-brand--bright);
    
        border-color: $color-brand--bright;
    
        &:active {
          background-color: lighten($color-brand--bright, 7%);
        }
      }
    
  • URL: /components/raw/uol-button/_button.scss
  • Filesystem Path: src/library/02-components/button/_button.scss
  • Size: 2.3 KB
/* Default */
{
  "type": "button",
  "content": "Contact"
}

/* Primary */
{
  "type": "button",
  "content": "Contact",
  "style": "primary"
}

/* Secondary */
{
  "type": "button",
  "content": "Contact",
  "style": "secondary"
}

/* Disabled */
{
  "type": "button",
  "content": "Contact",
  "disabled": true
}

/* Icon */
{
  "type": "button",
  "content": "Contact",
  "icon": "mdiArrowRight"
}

/* Icon After */
{
  "type": "button",
  "content": "Contact",
  "icon": "mdiArrowRight",
  "icon_after": true
}

/* Icon Only */
{
  "type": "button",
  "content": "Contact",
  "icon": "mdiArrowRight",
  "icon_only": true
}

/* Icon Only Large */
{
  "type": "button",
  "content": "Contact",
  "icon": "mdiArrowRight",
  "icon_only": true,
  "large_icon": true
}

/* Icon Only Bright */
{
  "type": "button",
  "content": "Contact",
  "style": "bright",
  "icon": "mdiArrowRight",
  "icon_only": true,
  "large_icon": true
}

/* With Id */
{
  "type": "button",
  "content": "Contact",
  "style": "primary",
  "id": "some-unique-button-id"
}

/* With Name */
{
  "type": "button",
  "content": "Contact",
  "style": "primary",
  "name": "button-name"
}

/* Type Submit */
{
  "type": "submit",
  "content": "Submit"
}

/* Type Reset */
{
  "type": "reset",
  "content": "Reset"
}