User Manual

Sort-button

A button used mainly in combination with a list of elements. It is used to display in what way the list or any item it is used with is sorted. This can either be ascended or descended.

Default


    
      

  

<button class="a-sort-button ">
  <span class="a-sort-button__text">Datum</span>

  <div class="a-sort-button__icon">
    <span class="a-sort-button__icon-part a-sort-button__icon-part--asc"></span>
    <span class="a-sort-button__icon-part a-sort-button__icon-part--desc"></span>
  </div>
</button>



  

<button class="a-sort-button is-asc">
  <span class="a-sort-button__text">Datum</span>

  <div class="a-sort-button__icon">
    <span class="a-sort-button__icon-part a-sort-button__icon-part--asc"></span>
    <span class="a-sort-button__icon-part a-sort-button__icon-part--desc"></span>
  </div>
</button>



  

<button class="a-sort-button is-desc">
  <span class="a-sort-button__text">Datum</span>

  <div class="a-sort-button__icon">
    <span class="a-sort-button__icon-part a-sort-button__icon-part--asc"></span>
    <span class="a-sort-button__icon-part a-sort-button__icon-part--desc"></span>
  </div>
</button>

Modifiers

  • a-sort-button__icon--asc

    By applying this modifier to the a-sort-button__icon child of the root of the component, you indicate which one of the icons is used for sorting this list in an ascended way

  • a-sort-button__icon--desc

    By applying this modifier to the a-sort-button__icon child of the root of the component, you indicate which one of the icons is used for sorting this list in an descended way

States

  • is-asc

    Using this state you indicate how the items are shown in an ascended state, the corresponding arrow will get more focus by adjusting the color.

  • is-desc

    Using this state you indicate how the items are shown in a descended state, the corresponding arrow will get more focus by adjusting the color.