Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

CopyButton

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.

StabilOppdatert 30. april 2025
Github FigmaEndringslogg

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

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.

JSX
// Bare ikon
<CopyButton 
  copyText="3.14" 
  icon={<LinkIcon title="Kopier lenke" />} 
  activeIcon={<LinkIcon title="Kopierte lenke" />} 
/>


// Med tekst
<CopyButton 
  copyText="3.14" 
  icon={<LinkIcon aria-hidden />} 
  activeIcon={<LinkIcon aria-hidden />} 
  text="Kopier lenke"
  activeText="Kopierte lenke"
/>

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

variant?

  • Type:
    "action" | "neutral"
  • Default:
    "neutral"

copyText

  • Type:
    string
  • Description:

    Text to copy to clipboard.

text?

  • Type:
    string
  • Description:

    Optional text in button.

activeText?

  • Type:
    string
  • Default:
    "Kopiert!"
  • Description:

    Text shown when button is clicked. Will be used as accessible label (title) if text-prop is not set.

onActiveChange?

  • Type:
    ((state: boolean) => void)
  • Description:

    Callback that is called when internal copy-state changes.

    • state: `true` when copy-state is activated, `false` when copy-state is deactivated.

icon?

  • Type:
    ReactNode
  • Default:
    <FilesIcon />
  • Description:

    Icon shown when button is not clicked.

activeIcon?

  • Type:
    ReactNode
  • Default:
    <CheckmarkIcon />
  • Description:

    Icon shown when active.

activeDuration?

  • Type:
    number
  • Default:
    2000
  • Description:

    Timeout duration in milliseconds.

title?

  • Type:
    string
  • Default:
    "Kopier"
  • Description:

    Accessible label for icon (ignored if text is set).

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

iconPosition?

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

    Icon position in Button.

size?

  • Type:
    "medium" | "small" | "xsmall"
  • Default:
    "medium"
  • Description:

    Changes padding, height, and font-size.

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

    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). React Docs

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

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