• Docs
  • Blog

    • 0.24.0

    • Switch to dark mode
    Get Started
    Components
    Styling
    Theming

    Concepts

    OverviewCompositionTesting

    Layout

    Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridLink OverlayScrollableStackWrap

    Components

    AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

    Utilities

    Feature FlagsForLocal StoragePortalShowsplitPropsTheme

    Clipboard

    A component that allows users to copy text to their clipboard with visual feedback and customizable indicators.

    • 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. It is unstyled by default, allowing for full customization.

    Hello, World!
    Copy

    Custom Variations

    You can create custom variations of the Clipboard component by composing it with other components or by using inline style props.

    Button

    Copy

    Copy Text

    Copy Email
    Copy

    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.

    API

    Root

    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
    Cerberus Design System | Docs