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-modal lk-page-header lk-pagination lk-radio-group lk-search lk-select-block lk-spinner lk-tag lk-textarea-block lk-to-top Portalheader Portalsøk Seksjonsintro Side footer Skip-link Søkeresultater Tabeller

Mindre brukte

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

Eksperimentell

lk-feedback-form lk-file-upload lk-iframe lk-suggestion

Avviklet

Alarmsignal Ankerlenker Badge Banner Brødsmuler Definere ikoner Ekstern lenke iframe Ikonliste Interaktive skjema elementer Knappegruppe Knapper lk-beep-test lk-flood-status lk-google-maps lk-google-maps-tile lk-help-text lk-rating lk-read-text lk-select-util lk-show-details lk-show-more lk-site-footer lk-site-header lk-tab-panel Melding Sidetopp Skjemaelementer Sosiale medier Tidslinje 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=`
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

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>