GithubYarn FigmaEndringslogg
Intro
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
CopyButton kan settes inline med tekst for å forenkle repetive 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
Tekster og ikoner
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
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
Token | Fallback |
---|---|
--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-animation | akselCopyButtonAnimation 0.4s linear |