Inline edit

An inline edit component allows users to switch between read-only and edits views of description lists, page text elements, or tables—within the context of their current view.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-inline-edit	--pf-v6-c-inline-edit__group--item--MarginInlineEnd	1rem
--pf-v6-c-inline-edit__group--item--MarginInlineEnd --pf-t--global--spacer--gap--action-to-action--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-inline-edit	--pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color	(In light theme) #0066cc
--pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color --pf-t--global--icon--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-inline-edit	--pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color	(In light theme) #004d99
--pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color --pf-t--global--icon--color--brand--hover --pf-t--global--color--brand--hover --pf-t--global--color--brand--300 --pf-t--color--blue--60 #004d99
	.pf-v6-c-inline-edit	--pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd	0.25rem
--pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-inline-edit	--pf-v6-c-inline-edit__group--m-footer--MarginBlockStart	2rem
--pf-v6-c-inline-edit__group--m-footer--MarginBlockStart --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-inline-edit	--pf-v6-c-inline-edit__label--m-bold--FontWeight	600
--pf-v6-c-inline-edit__label--m-bold--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-inline-edit__group.pf-m-icon-group	--pf-v6-c-inline-edit__group--item--MarginInlineEnd	0.25rem
--pf-v6-c-inline-edit__group--item--MarginInlineEnd --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-inline-edit__group.pf-m-column	--pf-v6-c-inline-edit__group--item--MarginInlineEnd	0
	.pf-v6-c-inline-edit__group > :last-child	--pf-v6-c-inline-edit__group--item--MarginInlineEnd	0
	.pf-v6-c-inline-edit__action.pf-m-valid .pf-v6-c-button.pf-m-plain	--pf-v6-c-button--m-plain--Color	(In light theme) #0066cc
--pf-v6-c-button--m-plain--Color --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color --pf-t--global--icon--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-inline-edit__action.pf-m-valid .pf-v6-c-button.pf-m-plain:hover	--pf-v6-c-button--m-plain--Color	(In light theme) #004d99
--pf-v6-c-button--m-plain--Color --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color --pf-t--global--icon--color--brand--hover --pf-t--global--color--brand--hover --pf-t--global--color--brand--300 --pf-t--color--blue--60 #004d99