DocsBlog

  • 1.1.2

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridGroupLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPaginationPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

Clipboard

Used to copy text to the clipboard.

  • npm
  • source
  • recipe
  • Ark
import { Clipboard } from '@cerberus/react'

Usage

The Clipboard component provides an accessible way to copy text to the user's clipboard with built-in visual feedback.

The Clipboard component is unstyled by default, allowing for full customization.

Button

Use the asChild prop on the Clipboard.Trigger to create a copy button.

Input

Use the asChild or style props prop on the Clipboard.Input to create a copy input.

Note

A Button is valid as a trigger replacement because the Clipboard trigger will pass the aria attributes to the button.

Store

Use the useClipboard hook to create a fully custom solution.

Primitives

You can utilize the primitive components or the css prop to customize the clipboard component.

ComponentDescription
ClipboardRootThe root context provider for the clipboard family.
ClipboardLabelA label element for accessibility.
ClipboardControlThe wrapper for input and trigger elements.
ClipboardInputThe input element containing the text to copy.
ClipboardTriggerThe button that triggers the copy action.
ClipboardIndicatorShows the current state (copy/copied) with icons.
CopyTextShows the current state (copy/copied) with text.

Data Attributes

The Clipboard component exposes several data attributes for better accessibility and customization.

NameValueDescription
data-scopeclipboardThe scope of the components.
data-partrootThe root container part.
data-partlabelThe label part.
data-partcontrolThe control part.
data-partinputThe input part.
data-parttriggerThe trigger part.
data-partindicatorThe indicator part.
data-copiedPresent when copied state is true

API

Root

PropTypeRequiredDescription
asChildbooleanNoUse the provided child element as the default rendered element, combining their props and behavior.
defaultValuestringNoThe initial value to be copied to the clipboard when rendered. Use when you don't need to control the value of the clipboard.
idstringNoThe unique identifier of the machine.
idsPartial<{ root: string; input: string; label: string }>NoThe ids of the elements in the clipboard. Useful for composition.
onStatusChange(details: CopyStatusDetails) => voidNoThe function to be called when the value is copied to the clipboard
onValueChange(details: ValueChangeDetails) => voidNoThe function to be called when the value changes
timeoutnumberNoThe timeout for the copy operation
valuestringNoThe controlled value of the clipboard

The Clipboard.Root is an abstraction of the Root component.

Indicator

The indicator accepts the following props:

NameDefaultDescription
size16The size of the indicator (in pixels). Can be 16, 20, 24, or 32.

Parts

The Clipboard API is an Object containing the full family of components.

Note

It is best to only use the Clipboard parts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.

NameDescription
RootThe ClipboardRoot component which is the Provider for the family.
LabelThe ClipboardLabel component for accessibility.
ControlThe ClipboardControl component wrapper.
InputThe ClipboardInput component displaying the text.
TriggerThe ClipboardTrigger component button.
IndicatorThe CopyIndicator component with default copy/checkmark icons.
CopyTextThe CopyText component with default "Copy"/"Copied" text indicators.
ContextThe raw context for accessing clipboard state within the component hierarchy.

On this page

  • Edit this page on Github
Copy
'use client'

import { HStack } from '@/styled-system/jsx'
import { Clipboard, IconButton, Text } from '@cerberus/react'

export function BasicDemo() {
  return (
    <Clipboard.Root value="Hello, World!">
      <Clipboard.Control asChild>
        <HStack gap="md" w="full">
          <Clipboard.Label asChild>
            <Text as="small" textStyle="label-sm">
              Hello, World!
            </Text>
          </Clipboard.Label>

          <Clipboard.Trigger asChild>
            <IconButton clipboard shape="square" size="sm" rounded="xs">
              <Clipboard.Indicator />
            </IconButton>
          </Clipboard.Trigger>
        </HStack>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}
Copy
'use client'

import { Button, Show, useClipboard } from '@cerberus/react'

export function StoreDemo() {
  const clipboard = useClipboard({ value: 'https://chakra-ui.com' })
  return (
    <Button size="sm" onClick={clipboard.copy}>
      <Show when={clipboard.copied} fallback="Copy">
        Copied
      </Show>
    </Button>
  )
}
Copy
'use client'

import { Button, Clipboard, Group } from '@cerberus/react'

export function InputDemo() {
  return (
    <Clipboard.Root maxW="300px" value="https://cerberus.digitalu.design/">
      <Clipboard.Control asChild>
        <Group layout="attached">
          <Clipboard.Input
            border="1px solid"
            borderColor="page.border.initial"
            px="md"
            rounded="sm"
            textStyle="label-sm"
            w="15rem"
          />
          <Clipboard.Trigger color="action.text.initial" asChild>
            <Button color="inherit" shape="default" size="md">
              <Clipboard.Indicator />
            </Button>
          </Clipboard.Trigger>
        </Group>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}
Copy
'use client'

import { Button, Clipboard } from '@cerberus/react'

export function ButtonDemo() {
  return (
    <Clipboard.Root value="Hello, World!">
      <Clipboard.Control>
        <Clipboard.Trigger asChild>
          <Button color="action.text.initial">
            <Clipboard.CopyText color="currentColor" />
            <Clipboard.Indicator />
          </Button>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}
Hello, World!
Copy
Copy
Copy