Aksel

Meny

Komponenter / Core

HelpText

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

SandboxSandbox
Å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, siden det ikke er noen lukkeknapp.

UnngåAlt for mye tekst i HelpText på mobil

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.

Plassering i HTML

Popoveren rendres som en <div>. Komponenten kan derfor ikke nestes i for eksempel en <p>-tag, som bare tillater phrasing content.

Tilgjengelighet

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 ikke blir lest opp automatisk i det brukeren aktiverer ikonet, siden komponenten hverken flytter fokus eller bruker en ARIA live region.

Props

Helptext

title?

  • Type:
    string
  • Default:
    hjelp
  • Description:

wrapperClassName?

  • Type:
    string
  • Description:

className?

  • Type:
    string

strategy?

  • Type:
    "absolute" | "fixed"
  • Default:
    absolute
  • Description:

placement?

  • Type:
    "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
  • Default:
    "top"
  • Description:

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

Tokens

TokenFallback
--ac-help-text-popover-bg--a-surface-info-subtle
--ac-help-text-button-color--a-surface-action
--ac-help-text-button-hover-color--a-surface-action-hover
--ac-help-text-button-active-color--a-surface-action-active
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