Aksel
Komponenter / Core

CopyButton

BetaOPPDATERT 22. mai 2023
GithubYarn FigmaEndringslogg

Beta

Komponenten er under utvikling, men klar for adopsjon. Vi er ønsker gjerne innspill på hvordan den fungerer og hvilken forbedringer vi kan gjøre.

Send innspill

CopyButton er en utility-komponent som 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

Eksempler

Åpne i nytt vindu

Tooltip

Bruk av tooltip med CopyButton kan hjelpe bruker å forstå konteksten for hva de kopierer. For skjermleser er det best om teksten i tooltip er statisk og ikke endrer seg basert på om knappen er 'aktivert' eller ikke. Eksempel-tekster kan være "Kopier fødselsnummer" eller "Kopier lenke til XYZ".

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.

Retningslinjer

  • Brukere skal kunne forstå hva de kopierer. Merk tydelig dataene som kopieres til utklippstavlen. Visuelt bør kopi-knappen være gruppert til dataene som kopieres, så det ikke er tvil om hva som kopieres.
  • Sørg for at de kopierte dataene er riktig formatert. Den skal være lett å lese og bør være kompatibel med applikasjonen dataene limes inn i.
  • De fleste maskiner beholder i dag en historie for hva som er kopiert til utklippstavlen. Hvis det er lagt opp til aktiv bruk av CopyButton i løsningen kan det være lurt å tilby informasjon om hvordan man effektivt bruker clipboard + historie på maskinen man bruker.

Sikkerhet

Vurder 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. Windows beholder i dag også en remote versjon (dette kan slås av) for historien, som kan skape problemer hvis maskinen blir brukt av flere.

Dette er en risiko som bruker ofte ikke vil vite om selv, så vi anbefaler å ikke bruke denne for kopi av sensitiv informasjon på eksterne løsninger. Unntak kan f.eks være kopi av uuid eller lignende. Disse følger ofte med kvitteringer ved innsending av skjema som isolert ikke vil kunne regnes som sensitiv data.

Props

CopyButton

size?"medium" | "small" | "xsmall"
variant?"action" | "neutral"
copyText string
Text to copy to clipboard
text? string
Optional text in button
activeText?string
Text shown when button is clicked Only set if used with 'text'-prop
onActiveChange? ((state: boolean) => void)
Callback when 'copied'-state is active
icon?ReactNode
Icon shown when button is not clicked
activeIcon?ReactNode
Icon shown when active
activeDuration?number
Timeout duration in milliseconds
title?string
* accessible label for icon (ignored if text is set)
activeTitle?string
accessible label for icon in active-state (ignored if text is set)
className? string
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
CopyButton extends HTMLButtonElement

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

Var denne artikkelen til hjelp?