Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

HelpText

Oppdatert 4. august 2023Stabil
GithubYarn FigmaEndringslogg

    Intro

    HelpText gir brukere en forklaring på ukjente begreper eller konsepter, som vises når de trenger det.

    Egnet til:

    • Tips og råd
    • Forklare begreper

    Uegnet til:

    • Mye informasjon
    • Rikt innhold og innhold med interaksjon

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    Retningslinjer

    Innhold

    Innholdet i HelpText bør være kort og forståelig. Mye tekst kan virke mot sin hensikt. På mobil er HelpText nesten ubrukelig med mye innhold som dekker store deler av skjermen.

    UnngåAlt for mye tekst i HelpText på mobil
    Mye tekst i HelpText tar stor plass på mobil, og bruker har ikke en lukk-mulighet

    Om du har mye å forklare bør du vurdere andre virkemidler. For eksempel ta i bruk ReadMore-komponenten, vis innholdet i et nytt panel eller link til utdypende informasjon på en annen side.

    Tilgjengelighet

    Interaksjon med mus

    HelpText vises på klikk. HelpText lukkes når brukeren klikker på ikonet eller utenfor popoveren.

    Interaksjon med touch

    Ikonet er ganske lite. Det bør derfor være god avstand til andre interaktive elementer for at det skal være enkelt å åpne HelpText med berøring.

    Interaksjon med tastatur

    HelpText lukker seg automatisk når man flytter fokus fra ikonet.

    KommandoInteraksjon
    SpaceÅpne og lukke hjelpeteksten
    EnterÅpne og lukke hjelpeteksten
    EscLukke hjelpeteksten

    Interaksjon med skjermleser

    Merk at innholdet i HelpText blir ikke lest opp automatisk i det brukeren aktiverer ikonet, siden komponenten hverken flytter fokus eller bruker en ARIA live region.

    Props

    Helptext

    title?string
    Adds a title-tooltip with the given text
    placement?"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
    Default dialog-placement on open
    wrapperClassName? string
    Classname for wrapper
    className? string
    strategy?"absolute" | "fixed"
    Changes what CSS position property to use You want to use "fixed" if reference element is inside a fixed container, but popover is not
    ref? Ref<HTMLButtonElement>
    Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Helptext extends HTMLButtonElement

    Tokens

    TokenFallback
    --ac-help-text-button-color--a-surface-action
    --ac-help-text-popover-bg--a-surface-info-subtle
    Hva er dette?

    Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

    Relaterte komponenter

    • ReadMore thumbnail
      ReadMore

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack