Back To Top
Shortcut to navigate to the top of a lengthy content page.
Focusable via Tab, activated via Enter or Space. Provides an ARIA
label for screen readers. Users SHOULD set accessible-label when
no text is slotted. MUST be inside a positioned container.
With href, renders as a link; without, a button that scrolls
via JS. Respects prefers-reduced-motion.
Overview
A back-to-top shortcut navigates to the top of a lengthy content page.
Installation
npm install @patternfly/elementsUsage
Default
The component appears automatically when the user scrolls down.
View HTML Source
<pf-v6-back-to-top>Back to top</pf-v6-back-to-top>
Always visible
Use always-visible to display the button regardless of scroll position.
View HTML Source
<pf-v6-back-to-top always-visible>Back to top</pf-v6-back-to-top>
Link mode
Use href to render the component as a link instead of a button.
View HTML Source
<pf-v6-back-to-top always-visible href="#top">Back to top</pf-v6-back-to-top>
Slots
- Default Slot
-
Visible label text for the trigger. Slotted text replaces the default ARIA label, so it MUST be descriptive for screen reader users.
Attributes
always-visible-
Flag to always show the back to top button.
- DOM Property
alwaysVisible- Type
-
boolean - Default
-
false
scrollable-selector-
Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events.
- DOM Property
scrollableSelector- Type
-
string - Default
-
unknown
accessible-label-
Accessible name for the trigger when there is no slotted text.
- DOM Property
accessibleLabel- Type
-
string - Default
-
unknown
href-
Page fragment link to target element, e.g.
#top. When set, renders as a link instead of a button.- DOM Property
href- Type
-
string - Default
-
unknown
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-v6-c-back-to-top--InsetBlockEnd |
Vertical offset from the block-end edge of the containing block. Maps to the design system's spacing scale for consistent component placement. |
1.5rem
|
--pf-v6-c-back-to-top--InsetInlineEnd |
Horizontal offset from the inline-end edge of the containing block. Uses the design system's spacing scale. |
3rem
|
--pf-t--global--font--family--body |
Design system body font family. |
'Red Hat Text', RedHatText, Helvetica, Arial, sans-serif
|
--pf-t--global--font--weight--body--default |
Design system default body font weight. |
400
|
--pf-v6-c-back-to-top--c-button--FontSize |
Font size of the trigger text. Uses a smaller size from the design system's type scale for unobtrusive labeling. |
0.75rem
|
--pf-t--global--font--line-height--body |
Design system body line height. |
1.5
|
--pf-t--global--border--radius--pill |
Design system pill border radius for fully rounded edges. |
999px
|
--pf-v6-c-back-to-top--c-button--PaddingBlockStart |
Block-start padding of the trigger. Controls vertical spacing above text content. |
0.25rem
|
--pf-v6-c-back-to-top--c-button--PaddingInlineEnd |
Inline-end padding of the trigger. Controls horizontal spacing after text content. |
0.5rem
|
--pf-v6-c-back-to-top--c-button--PaddingBlockEnd |
Block-end padding of the trigger. Controls vertical spacing below text content. |
0.25rem
|
--pf-v6-c-back-to-top--c-button--PaddingInlineStart |
Inline-start padding of the trigger. Controls horizontal spacing before text content. |
0.5rem
|
--pf-t--global--spacer--gap--action-to-action--default |
Design system action-to-action gap spacing between text and icon. |
0.5rem
|
--pf-v6-c-back-to-top--c-button--BoxShadow |
Box shadow of the trigger. Uses the design system's small elevation token to lift the button above page content. |
var(--pf-t--global--box-shadow--sm, 0 1px 4px 0 rgba(41, 41, 41, 0.15))
|
--pf-t--global--box-shadow--sm |
Design system small box shadow for subtle elevation. |
0 1px 4px 0 rgba(41, 41, 41, 0.15)
|
--pf-t--global--text--color--on-brand--default |
Design system text color for content on brand-colored surfaces. |
#1f1f1f
|
--pf-t--global--color--brand--default |
Design system brand color for the trigger background. |
#92c5f9
|
--pf-t--global--text--color--on-brand--hover |
Design system hover text color on brand surfaces. |
#1f1f1f
|
--pf-t--global--color--brand--hover |
Design system hover brand color. |
#b9dafc
|
--pf-t--global--text--color--on-brand--clicked |
Design system active/clicked text color on brand surfaces. |
#1f1f1f
|
--pf-t--global--color--brand--clicked |
Design system active/clicked brand color. |
#e0f0ff
|
--pf-t--global--border--width--action--focus |
Design system focus ring border width for interactive elements. |
2px
|
--pf-t--global--focus-ring--color--100 |
Design system focus ring color for WCAG-compliant keyboard focus indication. |
#0066cc
|
--pf-t--global--spacer--focus-ring--gap |
Design system focus ring gap between the element and its outline. |
2px
|
--pf-v6-c-back-to-top--md--InsetBlockEnd |
Vertical offset at medium (768px+) breakpoint. Provides more spacing on larger viewports per the design system's responsive spacing scale. |
3rem
|
CSS Shadow Parts
None
