HTML

Copy to clipboard

ExamplesDocumentationCSS variables

Examples

Copy to clipboard no expansion

Copied to clipboard

Copy to clipboard expansion

Copied to clipboard

Documentation

Overview

Accessibility

Attribute Applied to Outcome
aria-label="Show content" .pf-c-clipboard-copy__group-toggle Provides an accessible name for the button when an icon is used instead of text. Required when an icon is used with no supporting text.
aria-label="Copy to clipboard" .pf-c-clipboard-copy__group-copy Provides an accessible name for the button when an icon is used instead of text. Required when an icon is used with no supporting text.
aria-label="[input label text]" .pf-c-form-control Provides an accessible label for the input. Provide a label that describes the contents in the input. Required
aria-hidden="true" <i> Hides the icon from assistive technologies.
aria-controls="[id of expandable element]" .pf-c-clipboard-copy__group-toggle Identifies the element controlled by the toggle button. Required
aria-expanded="true" .pf-c-clipboard-copy__group-toggle Indicates that the expandable content is visible.
aria-expanded="false" .pf-c-clipboard-copy__group-toggle Indicates that the expandable content is hidden.
hidden .pf-c-clipboard-copy__expandable-content Indicates that the expandable content is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies.
aria-labelledby="[id of button] [id of input label]" .pf-c-clipboard-copy__group-copy, .pf-c-clipboard-copy__group-toggle Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. Important: If the label is defined on the <input> using aria-label, then use the id of the <input>. If the label is defined in a <label>, then use the id of the <label>. Alternatively this attribute can be ignored if the text input label is defined as part of the value in aria-label.

Usage

Class Applied to Outcome
.pf-c-clipboard-copy <div> Initiates a clipboard copy component. Required
.pf-c-clipboard-copy__group <div> Initiates a wrapper for the clipboard copy group. Required
.pf-c-clipboard-copy__group-toggle <button> Initiates a toggle button that expands content.
.pf-c-clipboard-copy__group-toggle-icon <i> Initiates a toggle button icon.
.pf-c-clipboard-copy__group-copy <button> Initiates a copy button with the clipboard icon. Required
.pf-c-clipboard-copy__expandable-content <div> Initiates an expandable element.
.pf-m-hover .pf-c-clipboard-copy__group-toggle, .pf-c-clipboard-copy__group-copy Modifies buttons for the hover state.
.pf-m-active .pf-c-clipboard-copy__group-toggle, .pf-c-clipboard-copy__group-copy Modifies toggle button for the active state.
.pf-m-focus .pf-c-clipboard-copy__group-toggle, .pf-c-clipboard-copy__group-copy Modifies toggle button for the focus state.
.pf-m-expanded .pf-c-clipboard-copy__group-toggle Modifies toggle button for the expanded state.

CSS variables

--pf-c-clipboard-copy__expandable-content--BackgroundColorc_clipboard_copy__expandable_content_BackgroundColor#fff
--pf-c-clipboard-copy__expandable-content--BorderWidthc_clipboard_copy__expandable_content_BorderWidth1px
--pf-c-clipboard-copy__expandable-content--BoxShadowc_clipboard_copy__expandable_content_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-clipboard-copy__expandable-content--OutlineOffsetc_clipboard_copy__expandable_content_OutlineOffsetcalc(-1 * 0.25rem)
--pf-c-clipboard-copy__expandable-content--PaddingBottomc_clipboard_copy__expandable_content_PaddingBottom1rem
--pf-c-clipboard-copy__expandable-content--PaddingLeftc_clipboard_copy__expandable_content_PaddingLeft1rem
--pf-c-clipboard-copy__expandable-content--PaddingRightc_clipboard_copy__expandable_content_PaddingRight1rem
--pf-c-clipboard-copy__expandable-content--PaddingTopc_clipboard_copy__expandable_content_PaddingTop1rem
--pf-c-clipboard-copy__group-copy--BorderBottomColorc_clipboard_copy__group_copy_BorderBottomColor#06c
--pf-c-clipboard-copy__group-copy--BorderLeftColorc_clipboard_copy__group_copy_BorderLeftColor#ededed
--pf-c-clipboard-copy__group-copy--BorderRightColorc_clipboard_copy__group_copy_BorderRightColor#ededed
--pf-c-clipboard-copy__group-copy--BorderTopColorc_clipboard_copy__group_copy_BorderTopColor#ededed
--pf-c-clipboard-copy__group-copy--BorderWidthc_clipboard_copy__group_copy_BorderWidth1px
--pf-c-clipboard-copy__group-copy--PaddingLeftc_clipboard_copy__group_copy_PaddingLeft1rem
--pf-c-clipboard-copy__group-copy--PaddingRightc_clipboard_copy__group_copy_PaddingRight1rem
--pf-c-clipboard-copy__group-copy--active--BorderBottomColorc_clipboard_copy__group_copy_active_BorderBottomColor#06c
--pf-c-clipboard-copy__group-copy--active--BorderBottomWidthc_clipboard_copy__group_copy_active_BorderBottomWidth2px
--pf-c-clipboard-copy__group-copy--focus--BorderBottomColorc_clipboard_copy__group_copy_focus_BorderBottomColor#06c
--pf-c-clipboard-copy__group-copy--focus--BorderBottomWidthc_clipboard_copy__group_copy_focus_BorderBottomWidth2px
--pf-c-clipboard-copy__group-copy--hover--BorderBottomColorc_clipboard_copy__group_copy_hover_BorderBottomColor#06c
--pf-c-clipboard-copy__group-toggle--BorderBottomColorc_clipboard_copy__group_toggle_BorderBottomColor#06c
--pf-c-clipboard-copy__group-toggle--BorderLeftColorc_clipboard_copy__group_toggle_BorderLeftColor#ededed
--pf-c-clipboard-copy__group-toggle--BorderRightColorc_clipboard_copy__group_toggle_BorderRightColor#ededed
--pf-c-clipboard-copy__group-toggle--BorderTopColorc_clipboard_copy__group_toggle_BorderTopColor#ededed
--pf-c-clipboard-copy__group-toggle--BorderWidthc_clipboard_copy__group_toggle_BorderWidth1px
--pf-c-clipboard-copy__group-toggle--OutlineOffsetc_clipboard_copy__group_toggle_OutlineOffsetcalc(-1 * 0.25rem)
--pf-c-clipboard-copy__group-toggle--PaddingLeftc_clipboard_copy__group_toggle_PaddingLeft1rem
--pf-c-clipboard-copy__group-toggle--PaddingRightc_clipboard_copy__group_toggle_PaddingRight1rem
--pf-c-clipboard-copy__group-toggle--active--BorderBottomColorc_clipboard_copy__group_toggle_active_BorderBottomColor#06c
--pf-c-clipboard-copy__group-toggle--active--BorderBottomWidthc_clipboard_copy__group_toggle_active_BorderBottomWidth2px
--pf-c-clipboard-copy__group-toggle--focus--BorderBottomColorc_clipboard_copy__group_toggle_focus_BorderBottomColor#06c
--pf-c-clipboard-copy__group-toggle--focus--BorderBottomWidthc_clipboard_copy__group_toggle_focus_BorderBottomWidth2px
--pf-c-clipboard-copy__group-toggle--hover--BorderBottomColorc_clipboard_copy__group_toggle_hover_BorderBottomColor#06c
--pf-c-clipboard-copy__group-toggle-icon--Transitionc_clipboard_copy__group_toggle_icon_Transition.2s ease-in 0s
--pf-c-clipboard-copy__group-toggle--m-expanded--BorderBottomColorc_clipboard_copy__group_toggle_m_expanded_BorderBottomColor#06c
--pf-c-clipboard-copy__group-toggle--m-expanded--BorderBottomWidthc_clipboard_copy__group_toggle_m_expanded_BorderBottomWidth2px
--pf-c-clipboard-copy--m-expanded__group-toggle-icon--Transformc_clipboard_copy_m_expanded__group_toggle_icon_Transformrotate(90deg)