Designsystemoversikt

Button

Button brukes til en tydelig handling og bør reserveres for neste steg brukeren faktisk kan ta.

Jøkul · Komponenter

Pakke: @fremtind/jokul

Installasjon: Se relevant guide

Button er en grunnleggende handlingskomponent i Jøkul. Start med én tydelig primærhandling per område, og flytt mindre viktige valg ned i hierarkiet.

Forhåndsvisningen bruker Jøkul sin faktiske CSS fra monopakka `@fremtind/jokul`, og HTML-en følger den samme klassekontrakten som stilpakkene forventer.

Eksemplet under er den primære playgrounden for Button og lar deg styre de Jøkul-definerte propsene direkte.

Hendelsesloggen under playgrounden viser hvilke native events komponenten faktisk fyrer mens du bruker forhåndsvisningen.

Eksempel

Props

    • as="button" · variant="secondary" · density="inherit" · type="button" · disabled=false · loader=ingen · icon=ingen · iconPosition="left"

    Kode

    React · tsx
    import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/button/button.min.css";
import "@fremtind/jokul/styles/components/loader/loader.min.css";
import { Button } from "@fremtind/jokul/button";

export function Example() {
    return (
        <Button
            type="button"
            variant="secondary"
        >
            Send inn
        </Button>
    );
}

    Hendelser

    Ingen hendelser fra komponenteksempelet ennå.

    Props

    Jøkul-props

    Props som er definert av Jøkul sitt eget Button-API eller av den polymorfe kontrakten rundt komponenten.

    Prop Type Standard Beskrivelse
    as React.ElementType "button" Polymorf rendering av knappen som et annet element, for eksempel en lenke når API-et krever det.
    variant "primary" | "secondary" | "tertiary" | "ghost" "secondary" Velger visuelt nivå for handlingen.
    density "comfortable" | "compact" arver layout-density Overstyrer tettheten for enkeltknappen dersom du ikke vil arve den fra omgivelsene.
    loader { showLoader: boolean; textDescription: string } ingen loader Viser innebygget lasteindikator og krever en tekstlig beskrivelse for skjermlesere.
    icon ReactElement ingen Ikoninnhold for knapper som kombinerer tekst og ikon eller rendres som ren ikon-knapp. Jøkul-ikoner fra `@fremtind/jokul/icon` er et naturlig utgangspunkt.
    iconPosition "left" | "right" "left" Plasserer ikonet på venstre eller høyre side når `icon` er satt.

    React-props

    Props som følger den vanlige React-komponentmodellen.

    Prop Type Standard Beskrivelse
    children ReactNode påkrevd når du ikke bruker `icon` Synlig etikett eller innhold i knappen. Når du bruker ren ikon-knapp styres innholdet via `icon`.
    className string ingen Ekstra klasse på rotelementet når du må koble knappen til lokal layout eller sporing.

    Native HTML-props

    Props som kommer fra det underliggende HTML-elementet når knappen rendres som `button` eller et annet nativt element.

    Prop Type Standard Beskrivelse
    disabled boolean false Gjør knappen utilgjengelig for aktivering inntil brukeren har fullført nødvendige steg.
    type "button" | "submit" | "reset" "button" Definerer hvordan knappen oppfører seg i skjemaer.
    href string ikke relevant for vanlig knapp Kommer fra det underliggende elementet når knappen rendres som lenke via `as`.
    onClick (event) => void ingen handler Klikkhåndterer for knappvarianter som faktisk utfører en handling i grensesnittet.

    ARIA-props

    Tilgjengelighetsattributter som kommer fra den underliggende DOM-kontrakten.

    Prop Type Standard Beskrivelse
    aria-label string ingen Brukes når knappen trenger et eksplisitt tilgjengelig navn, for eksempel hvis den bare viser et ikon.
    aria-describedby string ingen Peker til hjelpetekst eller feilmelding som utdyper hva knappen gjør eller hvorfor den er utilgjengelig.

    Utfasete props

    Gamle Jøkul-props som fortsatt finnes i typen, men bør erstattes av nyere API-er.

    Prop Type Standard Beskrivelse
    iconLeft ReactNode deprecated Utfaset API. Bruk `icon` sammen med `iconPosition="left"` i stedet.
    iconRight ReactNode deprecated Utfaset API. Bruk `icon` sammen med `iconPosition="right"` i stedet.

    Migrering fra utfasete props

    1. iconLeft

      Utfaset API. Bruk `icon` sammen med `iconPosition="left"` i stedet.

      Bytt til: icon={icon} iconPosition="left"

      Før

      <Button iconLeft={icon}>Send inn</Button>

      Etter

      <Button icon={icon} iconPosition="left">Send inn</Button>

      Notater

      • Flytt det samme ikoninnholdet over til `icon` uten å endre knappens tekst.

    2. iconRight

      Utfaset API. Bruk `icon` sammen med `iconPosition="right"` i stedet.

      Bytt til: icon={icon} iconPosition="right"

      Før

      <Button iconRight={icon}>Send inn</Button>

      Etter

      <Button icon={icon} iconPosition="right">Send inn</Button>

      Notater

      • Behold eksisterende ikon, men flytt plasseringen over til `iconPosition`.

    Når du skal bruke Button

    Bruk Button for eksplisitte handlinger som sender inn et skjema, bekrefter et valg eller åpner et neste steg i en arbeidsflyt.

    Bruk lenker for navigasjon til en ny side eller et nytt dokument. Når elementet faktisk navigerer, bør det ikke presenteres som en knapp.

    Tilgjengelighet

    Knappen må alltid ha et tilgjengelig navn. Synlig tekst er som regel det enkleste og beste valget.

    Unngå å bruke kun ikon dersom handlingen ikke er helt standardisert. Da trenger brukeren vanligvis en synlig tekst eller en separat label.

    Komponentprofil

    Klient-JS
    Ingen
    Hydrering
    Ingen
    Ikoner
    Valgfri
    Dekket API-props
    9
    Playground-kontroller
    8
    Delkomponenter
    0
    Anatomideler
    0
    Komposisjoner
    0
    Utfasete props
    2

    Stiler

    • @fremtind/jokul/styles/core/core.css
    • @fremtind/jokul/styles/components/button/button.min.css
    • @fremtind/jokul/styles/components/loader/loader.min.css
    • @fremtind/jokul/styles/components/icon/icon.min.css
    • @fremtind/jokul/styles/fonts/webfonts.min.css

    Ikonkontrakt

    Bruk: Valgfri

    Import: @fremtind/jokul/icon

    Stilimport: @fremtind/jokul/styles/components/icon/icon.min.css

    Fontimport: @fremtind/jokul/styles/fonts/webfonts.min.css

    • Button kan rendres uten ikoner, men `icon`-prop-en gjør ikonpakken til en del av kontrakten når du bygger ikonknapper eller kombinerer tekst og ikon.
    • Når du bruker `icon`, må samme oppsett også hente inn Jøkul sine ikonstiler så ikonets størrelse og vertikale rytme følger knappens kontrakt.

    Propkontrakt

    Dekning: Komplett

    Scope: Pakkens offentlige props, uten generiske DOM-props

    • Button · ButtonProps · @fremtind/jokul/button · 9 props
    • Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.

    Tilgjengelighet

    Tastatur: Følger native tastaturstøtte for button og a; Enter aktiverer begge, og Space aktiverer knapper.

    Semantikk som kreves

    • Komponenten trenger et tilgjengelig navn, vanligvis synlig knappetekst.
    • Bruk button for handlinger og a bare når elementet faktisk navigerer.
    • Bruk type="submit" når knappen sender inn et skjema.

    Automatiserte kontroller

    • Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
    • Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

    Manuelle kontroller

    • Bekreft at etiketten beskriver handlingen tydelig nok i konteksten.
    • Bekreft at disabled-tilstanden ikke er eneste forklaring når noe mangler.

    Ytelse

    • Grunnoppførselen er CSS-basert i docs og krever ikke klient-JS.
    • Loader-stilene trengs bare når knappen bruker den innebygde loaderen.

    Relatert