HTML

Clipboard copy

ExamplesDocumentationCSS Variables

Examples

Collapsed


Expanded

ditable

This is an editable version of the Copy to Clipboard Component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.

Read-Only

This is an editable version of the Copy to Clipboard Component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.

Documentation

Accessibility

AttributeApplied toOutcome
aria-label="Show content".pf-c-clipboard-copy__group-toggleProvides 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-copyProvides 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-controlProvides 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-toggleIdentifies the element controlled by the toggle button. Required
aria-expanded="true".pf-c-clipboard-copy__group-toggleIndicates that the expandable content is visible.
aria-expanded="false".pf-c-clipboard-copy__group-toggleIndicates that the expandable content is hidden.
hidden.pf-c-clipboard-copy__expandable-contentIndicates 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-toggleProvides 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

ClassApplied toOutcome
.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-copyModifies buttons for the hover state.
.pf-m-active.pf-c-clipboard-copy__group-toggle, .pf-c-clipboard-copy__group-copyModifies toggle button for the active state.
.pf-m-focus.pf-c-clipboard-copy__group-toggle, .pf-c-clipboard-copy__group-copyModifies toggle button for the focus state.
.pf-m-expanded.pf-c-clipboard-copy__group-toggleModifies 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_BorderWidth
1px
--pf-c-clipboard-copy__expandable-content--BoxShadowc_clipboard_copy__expandable_content_BoxShadow
0 0.0625rem 0.0625rem 0rem rgba(3,3,3,0.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,0.06)
--pf-c-clipboard-copy__expandable-content--OutlineOffsetc_clipboard_copy__expandable_content_OutlineOffset
calc(-1*0.25rem)
--pf-c-clipboard-copy__expandable-content--PaddingBottomc_clipboard_copy__expandable_content_PaddingBottom
1rem
--pf-c-clipboard-copy__expandable-content--PaddingLeftc_clipboard_copy__expandable_content_PaddingLeft
1rem
--pf-c-clipboard-copy__expandable-content--PaddingRightc_clipboard_copy__expandable_content_PaddingRight
1rem
--pf-c-clipboard-copy__expandable-content--PaddingTopc_clipboard_copy__expandable_content_PaddingTop
1rem
--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_BorderBottomWidth
2px
--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_BorderWidth
1px
--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_BorderBottomWidth
2px
--pf-c-clipboard-copy__group-copy--hover--BorderBottomColorc_clipboard_copy__group_copy_hover_BorderBottomColor
#06c
--pf-c-clipboard-copy__group-copy--PaddingLeftc_clipboard_copy__group_copy_PaddingLeft
1rem
--pf-c-clipboard-copy__group-copy--PaddingRightc_clipboard_copy__group_copy_PaddingRight
1rem
--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_BorderBottomWidth
2px
--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_BorderWidth
1px
--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_BorderBottomWidth
2px
--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_BorderBottomWidth
2px
--pf-c-clipboard-copy__group-toggle--OutlineOffsetc_clipboard_copy__group_toggle_OutlineOffset
calc(-1*0.25rem)
--pf-c-clipboard-copy__group-toggle--PaddingLeftc_clipboard_copy__group_toggle_PaddingLeft
1rem
--pf-c-clipboard-copy__group-toggle--PaddingRightc_clipboard_copy__group_toggle_PaddingRight
1rem
--pf-c-clipboard-copy--m-expanded__group-toggle-icon--Transformc_clipboard_copy_m_expanded__group_toggle_icon_Transform
rotate(90deg)