Skip to content
Primer Design System

Primer Design System

ClipboardCopyButton

The `ClipboardCopy` component styled as a Primer button.

On this page

v0.36.1BetaNot reviewed for accessibility

Description

ClipboardCopyButton uses the ClipboardCopy component to copy text to the clipboard, styled as a Primer button. It can be used wherever a button is desired, and works well with components like ButtonGroup.

Accessibility

This component has a built-in aria-live region that announces "Copied!" when the copy button is pressed.

Arguments

NameTypeDefaultDescription
system_arguments
Hash

N/A

The arguments accepted by Button and ClipboardCopy.

Examples

Slots

leading_visual

Leading visuals appear to the left of the button text.

Use:

  • leading_visual_icon for a Octicon.

  • leading_visual_svg to render a SVG.

NameTypeDefaultDescription
system_arguments
Hash

N/A

Same arguments as Octicon.

trailing_visual

Trailing visuals appear to the right of the button text.

Use:

  • trailing_visual_counter for a Counter.
NameTypeDefaultDescription
system_arguments
Hash

N/A

Same arguments as Counter.

trailing_action

Trailing action appears to the right of the trailing visual.

Use:

  • trailing_action_icon for a Octicon.
NameTypeDefaultDescription
system_arguments
Hash

N/A

Same arguments as Octicon.

tooltip

Tooltip that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort. Important: This tooltip defaults to type: :description. In a few scenarios, type: :label may be more appropriate. Consult the Tooltip documentation for more information.

NameTypeDefaultDescription
type
Symbol

:description

One of :description or :label.

system_arguments
Hash

N/A

Same arguments as Tooltip.