Lenke-knapp | Fleetwood designsystem

Komponenter

depentant-attrs lk-anchor-group lk-badge lk-banner lk-bil lk-breadcrumbs lk-button lk-button-link lk-card lk-carousel lk-checkbox lk-checkbox-group lk-cloner lk-details lk-divider lk-dual-listbox lk-error-summary lk-file-uploader lk-filter lk-icon lk-input-block lk-message lk-modal lk-page-header lk-pagination lk-radio-group lk-search lk-select-block lk-show-more lk-spinner lk-suggestion lk-tag lk-textarea-block lk-to-top Portalheader Portalsøk Seksjonsintro Side footer Skip-link Søkeresultater Tabeller Tidslinje

Mindre brukte

Aksjonsheader Aksjonsknapp Ansattsøkeresultater Arrangementsliste Artikkelliste Beskrivelsesliste Brukerinfo Coverbilde Fanenavigering Kalenderhendelser Knappevelger Kontaktseksjon Ledige stillinger lk-cloud-map lk-cover-image lk-feedback lk-figure lk-map Magasinsidetopp no-opener no-referral Overskrift med ikon Uthevet blokk

Eksperimentell

lk-feedback-form lk-file-upload lk-iframe lk-stepper

Avviklet

Alarmsignal Ankerlenker Badge Banner Brødsmuler Definere ikoner Ekstern lenke iframe Ikonliste Interaktive skjema elementer Knappegruppe Knapper lk-beep-test lk-details lk-flood-status lk-google-maps lk-google-maps-tile lk-rating lk-read-text lk-select-util lk-show-details lk-site-footer lk-site-header Melding Sidetopp Skjemaelementer Sosiale medier Varselboks

webcomponent

Bruk

Bruk bare til lenker som skal navigere til andre sider.
Komponenten er ikke en knap, den bare ser sånn ut.
Blir lest opp som en lenke i skjermlesere.

Attributter

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

Attributt	Tillatte verdier	Default	Beskrivelse
url	url:string	"#"	`<a>` sin `href=`
data-size	sm, md, lg	string
data-variant	primary, secondary, tertiary	"primary"
target	string	""	`<a>` sin `target=`
icon-after icon-before	path:string	""	`<img>` sine `src`
animation	string	"normal"	Legger til "`animation`" i `<a>` sin `class=`
~~size~~	string	"normal"	Depreacted Bruk data-size Legger til "button--`size`" i `<a>` sin `class=`
~~variant~~	string	"primary"	Deprecated Legger til "button--`variant`" 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

Logg inn

Vis kode

<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

Vis kode

<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>