Designsystem - Lenke-knapp

Bruk

Lk-button-link er ikke til lenker som skal navigere til andre sider.
Lk-button-link som alle andre knapper skal kun brukes til handlinger. f.eks Åpne lukke, scroll til anker lenke eller sende inn skjema.
Blir lest opp som knapp av skjerm lesere.

Struktur

<lk-button-link>
  <a>

    (span)
      (img/)
    (/span)

    <span>
      <slot/>
    </span>

    (span)
      (img/)
    (/span)

  </a>
</lk-banner>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt	Tillatte verdier	Default	Beskrivelse
url	url:string	"#"	`<a>` sin `href=`
target	string	""	`<a>` sin `target=`
variant	string	"primary"	Legger til "button--`variant`" i `<a>` sin `class=`
size	string	"normal"	Legger til "button--`size`" i `<a>` sin `class=`
icon-after icon-before	path:string	""	`<img>` sine `src`
animation	string	"normal"	Legger til "`animation`" i `<a>` sin `class=`

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot=	Beskrivelse
*	Elementer uten `slot=` attributter blir plassert inni `<a>` sin `<span>`

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

Logg inn

<div class="container">
    <lk-button-link url="https://duck.com">
        Logg inn
    </lk-button-link>
</div>

Til toppen av siden

Avbryt innsending

Åpne innstillinger

Logg ut

Knap lenk med animasjon

Neste

<div class="container grid">
    <div class="span-whole">
        <lk-button-link url="https://duck.com" icon-after="/assets/images/icon-arrow-up.svg">
            Til toppen av siden
        </lk-button-link>
    </div>
    
    <div class="span-whole">
        <lk-button-link url="https://skedsmo.kommune.no" target="_blank" variant="danger" size="large"
            icon-before="/assets/images/arrow-left.png">
            Avbryt innsending
        </lk-button-link>
    </div>
    
    <div class="span-whole">
        <lk-button-link url="https://skedsmo.kommune.no" target="_blank" variant="danger" size="large"
            icon-after="/assets/images/icon-external-dark-blue.svg">
            Avbryt innsending
        </lk-button-link>
    </div>

    <div class="span-whole">
        <lk-button-link url="/" variant="ghost" size="xlarge">
            Åpne innstillinger
        </lk-button-link>
    </div>

    <div class="span-whole">
        <lk-button-link url="/" variant="ghost-border"
            size="medium">
            Logg ut
        </lk-button-link>
    </div>

    <div class="span-whole">
        <h4 class="section-title margin-top--huge">Knap lenk med animasjon</h4>

        <lk-button-link url="https://lillestrom.kommune.no" target="_blank" icon-after="/assets/images/arrow-right.png"
            animation="animated-right">
            Neste
        </lk-button-link>
    </div>

    <div class="span-whole">
        <lk-button-link url="/" variant="ghost-border" icon-after="/assets/images/icon-navigation-arrow-right.svg"
            size="medium" animation="animated-right">
            Neste
        </lk-button-link>
    </div>
</div>