---
title: Buttons & Links
layout: common-ux-layout.hbs
---

<section class="sg-section">
  <h2>How to use</h2>
  <p>
    The different buttons colors and sizes are used depending on how much attention they need. A base principle is to
    avoid using both the red and blue buttons in the same “area”.
    The brighter part of the button gradient is based from the general colors with a ’15’ increase in ‘B’rightness.
    The Primary and Secondary should not sit next to each other but rather use the Alternative button.
  </p>
</section>
<section class="sg-section">
  <h3>Padding</h3>
  <p>Unless the button is used in a ‘100%’ width context they use fixed padding values depending on their size.</p>
</section>
<section class="sg-section">
  <span class="button-heading">btn-lg</span>
  <div class="buttons-showcase">
    <label>
      <span class="button-heading">btn btn-sales btn-lg</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn btn-sales btn-lg " type="button">Sales Button</button>
      </p>
    </label>
    <label>
      <span class="button-heading">btn btn-function btn-lg</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn btn-function btn-lg" type="button">Function-button</button>
      </p>
    </label>
    <label><span class="button-heading">btn btn-white dark-blue</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn white dark-blue" type="button">White</button>
      </p>
    </label>
    <label><span class="button-heading">btn ghost-white btn-lg</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn ghost-white btn-lg" type="button">Ghost-white</button>
      </p>
    </label>
    <label><span class="button-heading">btn ghost-blue btn-lg</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn ghost-blue btn-lg" type="button">Ghost</button>
      </p>
    </label>
    <label><span class="button-heading">btn btn-lg</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn btn-lg" disabled="disabled" type="button">Disabled</button>
      </p>
    </label>
    <label><span class="button-heading">btn btn-tag</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn btn-tag btn-lg" type="button">Tag</button>
      </p>
    </label>
  </div>
</section>
<section class="sg-section">
  <span class="button-heading">btn</span>
  <div class="buttons-showcase">
    <label>
      <span class="button-heading">btn btn-sales</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn btn-sales" type="button">Sales Button</button>
      </p>
    </label>
    <label><span class="button-heading">btn btn-function</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn btn-function" type="button">Function-button</button>
      </p>
    </label>
    <label><span class="button-heading">btn btn-white dark-blue</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn white dark-blue" type="button">White</button>
      </p>
    </label>
    <label><span class="button-heading">btn ghost-white</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn ghost-white" type="button">Ghost-white</button>
      </p>
    </label>
    <label><span class="button-heading">btn ghost-blue</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn ghost-blue" type="button">Ghost</button>
      </p>
    </label>
    <label><span class="button-heading">btn</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn" disabled="disabled" type="button">Disabled</button>
      </p>
    </label>
    <label><span class="button-heading">btn btn-tag</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn btn-tag" type="button">Tag</button>
      </p>
    </label>
  </div>
</section>
<section class="sg-section">
  <span class="button-heading">btn-sm</span>
  <div class="buttons-showcase">
    <label>
      <span class="button-heading">btn btn-sales btn-sm</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn btn-sales btn-sm" type="button">Sales Button</button>
      </p>
    </label>
    <label><span class="button-heading">btn btn-function btn-sm</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn btn-function btn-sm" type="button">Function-button</button>
      </p>
    </label>
    <label><span class="button-heading">btn btn-white dark-blue</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn white dark-blue" type="button">White</button>
      </p>
    </label>
    <label><span class="button-heading">btn ghost-white btn-sm</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn ghost-white btn-sm" type="button">Ghost-white</button>
      </p>
    </label>
    <label><span class="button-heading">btn ghost-blue btn-sm</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn ghost-blue btn-sm" type="button">Ghost</button>
      </p>
    </label>
    <label><span class="button-heading">btn btn-sm</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn btn-sm" disabled="disabled" type="button">Disabled</button>
      </p>
    </label>
    <label><span class="button-heading">btn btn-sm</span>
      <p>
        <div class="btn-border"></div>
        <button class="btn btn-tag btn-sm" type="button">Tag</button>
      </p>
    </label>
  </div>
  <span class="button-heading">Favorite</span>
  <div class="buttons-showcase">
    <label>
      <span class="button-heading">Favorite</span>
      <p>
        <div class="btn-border"></div>
        <div>{{>button_favorite}}</div>
        <script async src="https://www.tui.se/heart.se.js"></script>
      </p>
    </label>
    <label>
      <span class="button-heading">Favorite-blue</span>
      <p>
        <div class="btn-border"></div>
        <div>{{>button_favorite cssClass='blue'}}</div>
        <script async src="https://www.tui.se/heart.se.js"></script>
      </p>
    </label>
    <label>
      <span class="button-heading">Video</span>
      <p>
        <div class="btn-border"></div>
        {{>button_video}}
      </p>
    </label>
  </div>
</section>
<section class="sg-section">
  <h2>Links</h2>
  <p>Links is such a fundamental element in webdesign and will by its nature be
    used in so many variations across the site so this here is just the basic fundaments
    we’re using to have some sort of baseline.</p>
  <div class="links-showcase">
    <label>
      <span class="button-heading">Default</span>
      <p>
        <div class="btn-border"></div>
        <a href="#">A default link</a>
      </p>
    </label>
    <label><span class="button-heading">Icon-left</span>
      <p>
        <div class="btn-border"></div>
        <a href="#">
          {{>icon_svg name='directions'}}
          Icon-left
        </a>
      </p>
    </label>
    <label><span class="button-heading">Icon-right</span>
      <p>
        <div class="btn-border"></div>
        <a href="#">
          Icon-right
          {{>icon_svg name='directions'}}
        </a>
      </p>
    </label>
  </div>
</section>
</div>