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
Eksempler
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
size?
- Type:
"medium" | "small" | "xsmall"
- Default:medium
- Description:
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:
Param Description 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:
activeTitle?
- Type:
string
- Default:Kopiert
- Description:
iconPosition?
- Type:
"left" | "right"
- Default:left
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLButtonElement>
- Description: