Gå til sidens indhold

Komponenter

Tags

Et tag er en mindre knap, som du kan bruge til at angive metainformation om indhold, der kan kategoriseres, filtreres eller på anden beskrives med nøgleord. Tags forekommer med og uden ikon.

Retningslinjer

Tilgængelighed

  • Tags markeres tydeligt med en focus-tilstand, når brugere vha tab-tasten navigerer sig frem til dem.
  • Undgå at anvende div eller img tags til at konstruere et tag, da skærmlæsere ikke automatisk kan afkode funktionaliteten i så fald.
  • Tags med et indlejret svg-ikon som fx (X) for ”Slet” eller ”Fjern” skal være klikbare på hele tag’et og ikke kun ikonet.

Brugervenlighed

Anvendes til

Et tag er en sekundær funktionalitet, der typisk anvendes til meta-information om indhold, der kan kategoriseres, filtreres eller på anden beskrives med nøgleord.

Anvendes ikke til

  • Primær funktionalitet som fx ”Gem”, hvor der i stedet bør anvendes en knap.
  • Hvis tags anvendes i tæt forbindelse med knapper, kan det forvirre brugeren. Overvej nøje placering og anvendelse og udfør brugertest.

Vejledning

  • Generelt skal du bruge tags til at give brugeren yderligere, sekundær information og nøgleord i relation til indholdet.
  • Brug så mange tags, der giver mening, men så få som muligt.
  • Brug ord og begreber, der kan genkendes fra løsningens kontekst og ikke ukendte.
  • Skriv kort og præcist.
  • Brug stort forbogstav og små bogstaver for resten.
  • Undgå at blande funktioner og husk at tags er noget, der må kunne overses uden at løsningens anvendelse forringes.

Der er to eksempler på hvordan tags kan se ud. Ét uden ikon og ét med ikon.

Alle tags skal have en .tag class <button></button> elementet. Hvis et tag skal have ikon, skal der yderligere tilføjes en .tag-icon class.

Et tag vil se følgende ud:

<button class="tag">My tag</button>

Et tag med ikon vil se følgende ud:

<button class="tag tag-icon">My tag</button>

Standard

<div class="container py-8">
    <button class="tag ">Default </button><button
        class="tag tag-hover">Hover </button><button
        class="tag tag-active">Active </button><button
        class="tag focus">Focus </button>
</div>

Tags med ikon

<div class="container py-8">
    <button class="tag tag-icon">Default
        <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#close-circle"></use></svg>
    </button><button class="tag tag-icon tag-hover">Hover
        <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#close-circle"></use></svg>
    </button><button class="tag tag-icon tag-active">Active
        <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#close-circle"></use></svg>
    </button><button class="tag tag-icon focus">Focus
        <svg class="icon-svg "  focusable="false" aria-hidden="true" ><use xlink:href="#close-circle"></use></svg>
    </button>
</div>