<lm-tag> – Merkelapp / Tag

Om komponenten

Kanonisk navn

<lm-tag>

Synonymer

merkelapp, etikett, badge, chip, tag, statuslabel

Kategori

innhold, klassifisering

ARIA-mønster

Ikke aktuelt - Ren visuell merkelapp uten egen interaksjon eller APG-mønster.

Parts

tag

Native-first-vurdering

HTML har ingen egen badge- eller tag-primitiv. Komponenten tilfører bare delt styling rundt enkel tekst, uten ny semantikk.

Nettleserstøtte

Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er.

Design-tokens

var(--font-size-extra-small, ...), var(--border-color, ...), var(--radius-pill, ...), var(--opacity-muted, ...)

Sist endret

20. september 2026

Brukt

4 steder

Formål

Generisk, pilleformet merkelapp for å klassifisere eller merke et element. Rent visuell primitiv uten egen tilstand eller logikk.

Egner seg for

• Korte etiketter for status, type eller klassifisering, f.eks. "Fly", "Hotell" eller "Arkivert".
• Inline-markeringer som bare trenger konsekvent pillestil.

Egner seg ikke for

• Interaktive chips, filtre eller elementer som skal kunne fjernes ved klikk; komponenten har ingen hendelser eller innebygde knapper.
• Lange tekster eller rikt blokkinnhold; stilen er laget for kort inline-innhold.

Bruk

<script type="module" src="/designsystem/komponenter/innhold/tag/tag.js"></script>

<lm-tag>Fly</lm-tag>
<lm-tag>Arkivert</lm-tag>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Slots

Parts

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-tag::part(tag) {
    /* egne stiler for "Den pilleformede etiketten." */
}

Tilgjengelighet

Komponenten setter ingen ARIA-roller eller aria-*-attributter; skjermlesere leser bare det slottede innholdet. Den er ikke interaktiv og har ingen tastaturlogikk eller animasjon.

• Komponenten setter ingen ARIA-roller eller aria-*-attributter; skjermlesere leser bare det slottede innholdet.
• Den er ikke interaktiv og har ingen tastaturlogikk.
• Skjermleseropplevelsen er vanlig tekst eller inline-innhold.
• Komponenten har ingen egen animasjon eller høy-kontrastlogikk.

Detaljer

• Erstatter den tidligere prosjektspesifikke CSS-klassen <span class="tag"> i turer/styles.css med en delt komponent.

Referanser

Se også:

• ../card/index.html - bruker ofte en tag i trailing-slotten for å vise kort status eller type på innholdet.
• ../../tilbakemelding/inline-message/index.html - er en annen liten tekstlig primitiv, men for løpende statusmeldinger i stedet for klassifisering.

Brukes av:

• turer/js/features/timeline/timeline.js - merker type stopp ("Stopp", "Fly", "Hotell", "Tur start", "Tur slutt") i tidslinjen.
• turer/js/pages/dashboard.js - merker arkiverte turer ("Arkivert") i tur-kortet.
• designsystem/komponenter/navigasjon/sok/sok.js - merker type (komponent/funksjon/token) på hvert søkeresultat.
• okonomi/js/features/analyseverktoy/analyseverktoy.js - merker "Ny"/"Borte" i måned-over-måned-tabellen.

Avhengigheter: Ingen