Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • ConfirmationPanel
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • LinkPanelAvviklet
      • PanelAvviklet

CopyButton

Oppdatert 30. april 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Retningslinjer
    • Tekster og ikoner
    • Sikkerhet
  • Props
    • CopyButton
  • Tokens

Intro

CopyButton lar bruker kopiere tekst til utklippstavlen. Kopi-funksjonen brukes ofte for å spare tid og redusere feil ved manuell overføring av informasjon, f.eks. fødselsnummer eller telefonnummer.

Egnet til:

  • Bruk i applikasjoner som involverer deling eller overføring av informasjon på tvers av ulike kontekster eller programmer.
  • Kopi av tekst der det er viktig å unngå feil

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Icon-propen lar deg bytte ikon i default state

ActiveIcon-propen lar deg endre ikon i active state

Tooltip kan hjelpe med å gi mer kontekst om hva man kopierer. Testing med skjermleser har vist at endringer av teksten i Tooltip ikke konsekvent blir fanget opp av skjermlesere. Teksten bør derfor være statisk.

Ved utlisting av mye relevant innhold, kan CopyButton brukes for å enklere kopiere informasjonen.

Retningslinjer

  • Visuelt bør kopi-knappen være gruppert til dataene som kopieres, så det ikke er tvil om hva som kopieres.
  • Det er ikke anbefalt å bruke teksten som kopieres som tekst på knappen, pga. layout- og UU-utfordringer.
  • Sørg for at den kopierte teksten er riktig formatert. Den skal være lett å lese og bør være kompatibel med andre applikasjoner.

Tekster og ikoner

Komponenten kommer innebygd med standard ikon for vanlig og 'aktivert'-state. Hvis du velger å overskrive disse ved bruk av prop icon og activeIcon er det viktig å sette title på disse. Hvis du overskriver text og activeText må man sette aria-hidden på ikonene.

Sikkerhet

Det er noen sikkerhetsrisikoer knyttet til kopiering av sensitive data til utklippstavlen. Uten å manuelt slette historien i utklippstavlen vil den neste som bruker maskinen kunne ha tilgang til data fra forrige økt. Dette er en risiko som bruker ofte ikke vil vite om selv.

Det kan imidlertid ikke være hvert enkelt produktteam sitt ansvar å ta høyde for dette, men heller eier/bruker av maskinen. Det kan likevel være fint å være bevisst på det.

Props

CopyButton

variant?

  • Type:
    "action" | "neutral"
  • Default:
    neutral

copyText

  • Type:
    string
  • Description:

text?

  • Type:
    string
  • Description:

activeText?

  • Type:
    string
  • Default:
    "Kopiert!"
  • Description:

onActiveChange?

  • Type:
    ((state: boolean) => void)
  • Description:
    ParamDescription
    state`true` when copy-state is activated, `false` when copy-state is deactivated.

icon?

  • Type:
    ReactNode
  • Default:
    <FilesIcon />
  • Description:

activeIcon?

  • Type:
    ReactNode
  • Default:
    <CheckmarkIcon />
  • Description:

activeDuration?

  • Type:
    number
  • Default:
    2000
  • Description:

title?

  • Type:
    string
  • Default:
    "Kopier"
  • Description:

className?

  • Type:
    string

iconPosition?

  • Type:
    "left" | "right"
  • Default:
    left
  • Description:

size?

  • Type:
    "medium" | "small" | "xsmall"
  • Default:
    medium
  • Description:

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

Tokens

TokenFallback
--ac-copybutton-border-radius--a-border-radius-medium
--ac-copybutton-action-text--a-text-action
--ac-copybutton-action-bg--a-surface-transparent
--ac-copybutton-action-hover-text--a-text-action-hover
--ac-copybutton-action-hover-bg--a-surface-hover
--ac-copybutton-action-active-text--a-icon-success
--ac-copybutton-neutral-text--a-text-subtle
--ac-copybutton-neutral-bg--a-surface-transparent
--ac-copybutton-neutral-hover-text--a-text-default
--ac-copybutton-neutral-hover-bg--a-surface-hover
--ac-copybutton-neutral-active-text--a-text-default
--ac-copybutton-animationakselCopyButtonAnimation 0.4s linear
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.

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