Back to top

The back to top component is a shortcut that allows users to quickly navigate to the top of a page via a button.

CSS variables

Prefixed with 'pf-v6-c-back-to-top'

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-back-to-top	--pf-v6-c-back-to-top--InsetInlineEnd	3rem
--pf-v6-c-back-to-top--InsetInlineEnd --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-back-to-top	--pf-v6-c-back-to-top--InsetBlockEnd	1.5rem
--pf-v6-c-back-to-top--InsetBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-back-to-top	--pf-v6-c-back-to-top--md--InsetBlockEnd	3rem
--pf-v6-c-back-to-top--md--InsetBlockEnd --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-back-to-top	--pf-v6-c-back-to-top--c-button--FontSize	0.75rem
--pf-v6-c-back-to-top--c-button--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-back-to-top	--pf-v6-c-back-to-top--c-button--PaddingBlockStart	0.25rem
--pf-v6-c-back-to-top--c-button--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-back-to-top	--pf-v6-c-back-to-top--c-button--PaddingInlineEnd	0.5rem
--pf-v6-c-back-to-top--c-button--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-back-to-top	--pf-v6-c-back-to-top--c-button--PaddingBlockEnd	0.25rem
--pf-v6-c-back-to-top--c-button--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-back-to-top	--pf-v6-c-back-to-top--c-button--PaddingInlineStart	0.5rem
--pf-v6-c-back-to-top--c-button--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-back-to-top	--pf-v6-c-back-to-top--c-button--BoxShadow	0px 1px 6px 0px rgb(41, 41, 41, 0.1500)
--pf-v6-c-back-to-top--c-button--BoxShadow --pf-t--global--box-shadow--sm --pf-t--global--box-shadow--X--sm--default --pf-t--global--box-shadow--Y--sm--default --pf-t--global--box-shadow--blur--sm --pf-t--global--box-shadow--spread--sm--default --pf-t--global--box-shadow--color--sm--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--500 --pf-t--global--box-shadow--blur--100 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 0px 1px 6px 0px rgb(41, 41, 41, 0.1500)
	.pf-v6-c-back-to-top .pf-v6-c-button	--pf-v6-c-button--FontSize	0.75rem
--pf-v6-c-button--FontSize --pf-v6-c-back-to-top--c-button--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-back-to-top .pf-v6-c-button	--pf-v6-c-button--PaddingBlockStart	0.25rem
--pf-v6-c-button--PaddingBlockStart --pf-v6-c-back-to-top--c-button--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-back-to-top .pf-v6-c-button	--pf-v6-c-button--PaddingInlineEnd	0.5rem
--pf-v6-c-button--PaddingInlineEnd --pf-v6-c-back-to-top--c-button--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-back-to-top .pf-v6-c-button	--pf-v6-c-button--PaddingBlockEnd	0.25rem
--pf-v6-c-button--PaddingBlockEnd --pf-v6-c-back-to-top--c-button--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-back-to-top .pf-v6-c-button	--pf-v6-c-button--PaddingInlineStart	0.5rem
--pf-v6-c-button--PaddingInlineStart --pf-v6-c-back-to-top--c-button--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem

Prefixed with 'pf-d-back-to-top'

Expand or collapse column	Selector	Variable	Value