Aksel

Meny

Komponenter / Core

CopyButton

Oppdatert Stabil
GithubYarn FigmaEndringslogg

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

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

activeTitle?

  • Type:
    string
  • Default:
    Kopiert
  • Description:

iconPosition?

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

className?

  • Type:
    string

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.