<lm-link-button> – Lenkeknapp / Link button

Om komponenten

Kanonisk navn

<lm-link-button>

Synonymer

lenkeknapp, knappelenke, action link, button link, call-to-action

Kategori

handling, navigasjon

ARIA-mønster

Link - komponenten bevarer en ekte lenke som primær interaksjon.

Parts

Ingen

Native-first-vurdering

Komponenten er bevisst native-first ved å la en ekte <a> stå for navigasjonen. Den legger bare til knappestil rundt eksisterende lenkesemantikk.

Nettleserstøtte

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

Design-tokens

var(--radius-small, ...), var(--transition-duration, ...), var(--border-color, ...)

Sist endret

20. september 2026

Brukt

4 steder

Formål

Stiler en vanlig <a href="..."> som en knapp for navigasjon eller nedlasting som bør fremheves visuelt. Lenkesemantikken bevares, i motsetning til en <button> med JS-styrt navigasjon.

Egner seg for

• Navigasjon eller nedlasting som skal se ut som en primær eller sekundær knapp, men fortsatt være en ekte lenke.
• Handlingslenker ved siden av annen UI, f.eks. "Start presentasjon" eller "Last ned som PDF".

Egner seg ikke for

• Handlinger som ikke er navigasjon, som skjemainnsending eller åpning og lukking av dialoger; bruk en ekte <button>.
• Slottet innhold som ikke er en <a>; stylingen er bevisst skrevet for lenker.

Bruk

<script type="module" src="/designsystem/komponenter/handling/link-button/link-button.js"></script>

<lm-link-button>
    <a href="/turer/index.html">Turer</a>
</lm-link-button>

<lm-link-button variant="outlined">
    <a href="/slides/utskrift.html">Last ned som PDF</a>
</lm-link-button>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Slots

Tilgjengelighet

Komponenten setter ingen egne ARIA-roller eller aria-*-attributter; semantikken kommer fra det slottede <a>-elementet. Tastatur, skjermleserannonsering og lenkeatferd følger ankerets native oppførsel. Komponenten legger bare på tydelig :focus-visible. forced-colors: active bruker systemfarger, og prefers-reduced-motion: reduce trenger ingen egen logikk utover korte fargeoverganger.

• Komponenten setter ingen egne ARIA-roller eller aria-*-attributter; semantikken kommer fra det slottede <a>-elementet.
• Tastatur, skjermleserannonsering og lenkeatferd følger ankerets native oppførsel.
• Lenken forblir en ekte lenke, ikke en knapp med JS-navigasjon.
• forced-colors: active bruker systemfarger, og prefers-reduced-motion: reduce trenger ingen egen logikk utover korte fargeoverganger.

Detaljer

• Ren visuell primitiv som deler konsekvent styling via ::slotted(a).
• Bruker de samme design-tokenene som resten av nettstedet, så lenken ser lik ut overalt den brukes.
• "filled" bruker --color-surface-inverse/--color-surface-inverse-text for robust kontrast; vil du ha annen bakgrunnsfarge, bruk heller "outlined" enn å overstyre bakgrunnen selv.
• forced-colors: active bytter til systemfarger, i samme mønster som resten av reposen.
• Selve <a>-elementet beholder vanlige attributter som target, download og rel.

Referanser

Se også:

• ../button-group/index.html - brukes når flere knappelignende handlinger bør grupperes og justeres samlet.
• ../../innhold/card/index.html - kort inneholder ofte en fremhevet tittel- eller handlingslenke, men løser en annen, mer strukturert presentasjon rundt den.

Brukes av:

• slides/komponenter/slide-info/slide-info.js - "Start presentasjon"- og "Last ned som PDF"-knappene på presentasjonens infoside.
• okonomi/index.html - onboarding-oppfordring og handlingssnarveier.
• okonomi/forbruk/index.html - onboarding-oppfordring og import-/kvitteringshandlinger.
• index.html (rot) - LinkedIn-/GitHub-lenkene på forsiden.

Avhengigheter: Ingen