Guidance

This component is to be used where a button is to be displayed, similay to uol-button, but where the button is to act as a hyperlink.

Developer guidance

This button should be used sparingly, other options may be more applicable to linking to other pages.

Each button consists of two required terms:

  • ‘content’ - The text content of the button
  • ‘url’ - The linked URL
  • ‘style’ (optional) - The button style (see @uol-button)

Further options as per the uol-button linked above (eg. icon, icon_after etc) can also be added

'context': {
  'links': [
    {
      'style': 'secondary',
      'content': 'Clear all filters',
      'url': '/url',
      'icon': 'mdiArrowRight',
      'icon_after': true
    }
  ]
}

<div class="uol-link-button-container">
  {% for link in links %}
    <a class="uol-button uol-link-button uol-button--{{ link.style }}
    {% if link.icon %}
      uol-icon uol-icon--{{ link.icon }}
      {{ 'uol-icon--position-after' if link.icon_after }}
      {{ 'uol-icon--icon-only' if link.icon_only }}
      {{ 'uol-icon--icon-only--large' if link.large_icon }}
    {% endif %}"
    href="{{ link.url }}">{{ link.content }}</a>
  {% endfor %}
</div>
<div class="uol-link-button-container">

    <a class="uol-button uol-link-button uol-button--
    " href="/url">Contact</a>

</div>
  • Content:
    .uol-link-button-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      
      @include media(">=uol-media-m") {
        flex-direction: row;
      }
    }
    .uol-link-button {
      display: inline-block;
      min-width: 0;
      margin-right: $spacing-5;
      margin-bottom: $spacing-6;
    
      @include media(">=uol-media-m") {
        margin-right: $spacing-5;
        margin-bottom: $spacing-7;
      }
    
      @include media(">=uol-media-xl") {
        margin-right: $spacing-6;
      }
    
      &:first-child {
        margin-bottom: $spacing-6;
        @include media(">=uol-media-m") {
          margin-bottom: 0;
        }
      }
    
      &:last-child {
        margin-bottom: 0;
      }
    }
  • URL: /components/raw/uol-link-button/_link-button.scss
  • Filesystem Path: src/library/02-components/link-button/_link-button.scss
  • Size: 627 Bytes
{
  "links": [
    {
      "type": "link button",
      "content": "Contact",
      "url": "/url"
    }
  ]
}