University of Leeds Design System v1.0.13

Link Button: Button With Icon After

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--secondary
    
      uol-icon uol-icon--mdiArrowRight
      uol-icon--position-after
      
      
    " href="/url">Clear all filters</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;
  @include media(">=uol-media-m") {
    margin-right: $spacing-5;
  }

  @include media(">=uol-media-xl") {
    margin-right: $spacing-6;
  }

  &:first-child {
    margin-bottom: $spacing-6;
    @include media(">=uol-media-m") {
      margin-bottom: 0;
    }
  }
}
  • URL: /components/raw/uol-link-button/_link-button.scss
  • Filesystem Path: src/library/02-components/link-button/_link-button.scss
  • Size: 522 Bytes 
{
  "links": [
    {
      "style": "secondary",
      "content": "Clear all filters",
      "url": "/url",
      "icon": "mdiArrowRight",
      "icon_after": true
    }
  ]
}