Intro
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
Icon-propen lar deg bytte ikon i default state
ActiveIcon-propen lar deg endre ikon i active state
CopyButton kan settes inline med tekst for å forenkle repetitive oppgaver.
Tooltip kan hjelpe med å gi mer kontekst om hva man kopierer. Vi har testet dette med skjermleser og funnet ut at statisk tekst som 'kopier ...' fungerer bedre enn dynamisk tekst ved klikk i tooltip.
CopyButton kan eksempelvis inlines i breadcrumbs for kopi av fødselsnummer.
Ved utlisting av mye relevant innhold, kan CopyButton brukes for å enklere kopiere informasjonen.
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
CopyButtoni 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"
- 'xsmall' should only be used in tables
- 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)
- iconPosition?"left" | "right"
- Icon position in button
- 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