Clipboard copy

The clipboard copy component allows users to quickly and easily copy content to their clipboard.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration	100ms
--pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration --pf-t--global--motion--duration--icon--default --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__toggle-icon--Transition	transform 100ms cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-clipboard-copy__toggle-icon--Transition transform --pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration --pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction transform --pf-t--global--motion--duration--icon--default --pf-t--global--motion--timing-function--default transform --pf-t--global--motion--duration--sm --pf-t--global--timing-function--200 transform --pf-t--global--duration--100 cubic-bezier(.4, 0, .2, 1) transform 100ms cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate	-180deg
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart	0.25rem
--pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart	1rem
--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd	1rem
--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd	1rem
--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart	1rem
--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor --pf-t--global--background--color--control--default --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth	1px
--pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth	1px
--pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth	1px
--pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth	1px
--pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--BorderColor	(In light theme) #8c8c8c
--pf-v6-c-clipboard-copy__expandable-content--BorderColor --pf-t--global--border--color--control--default --pf-t--global--border--color--300 --pf-t--color--gray--45 #8c8c8c
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--BorderRadius	6px
--pf-v6-c-clipboard-copy__expandable-content--BorderRadius --pf-t--global--border--radius--control--form-element --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__expandable-content--OutlineOffset	0.25rem
--pf-v6-c-clipboard-copy__expandable-content--OutlineOffset --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor --pf-t--global--background--color--control--read-only --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor --pf-t--global--border--color--control--read-only --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__group--Gap	0.25rem
--pf-v6-c-clipboard-copy__group--Gap --pf-t--global--spacer--gap--control-to-control--default --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart	0.25rem
--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd	0.25rem
--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy--m-inline--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-clipboard-copy--m-inline--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__actions--Gap	0.25rem
--pf-v6-c-clipboard-copy__actions--Gap --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__actions--MarginInlineStart	0.25rem
--pf-v6-c-clipboard-copy__actions--MarginInlineStart --pf-t--global--spacer--gap--text-to-element--compact --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__actions-item--button--Color	(In light theme) #707070
--pf-v6-c-clipboard-copy__actions-item--button--Color --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__actions-item--button--hover--Color	(In light theme) #1f1f1f
--pf-v6-c-clipboard-copy__actions-item--button--hover--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__text--m-code--FontFamily	"Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace
--pf-v6-c-clipboard-copy__text--m-code--FontFamily --pf-t--global--font--family--mono --pf-t--global--font--family--300 "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace
	.pf-v6-c-clipboard-copy	--pf-v6-c-clipboard-copy__text--m-code--FontSize	0.875rem
--pf-v6-c-clipboard-copy__text--m-code--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-clipboard-copy.pf-m-readonly	--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor --pf-t--global--background--color--control--read-only --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-clipboard-copy.pf-m-readonly	--pf-v6-c-clipboard-copy__expandable-content--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-clipboard-copy__expandable-content--BorderColor --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor --pf-t--global--border--color--control--read-only --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain	--pf-v6-c-button--m-plain__icon--Color	(In light theme) #707070
--pf-v6-c-button--m-plain__icon--Color --pf-v6-c-clipboard-copy__actions-item--button--Color --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain	--pf-v6-c-button--m-plain--hover__icon--Color	(In light theme) #1f1f1f
--pf-v6-c-button--m-plain--hover__icon--Color --pf-v6-c-clipboard-copy__actions-item--button--hover--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f