Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Back to top

Guidance Code Accessibility

Component demo

A StackBlitz example of how the back to top component works in the context of other components can be seen in the Top Navigation with Back to Top layout example .

Interactive example

Show Back to top
<ic-back-to-toptarget="main"></ic-back-to-top>

Back to top details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property target
Attribute target

The ID of the element to jump back to when the link is clicked.

Required type: string
Property position
Attribute position

The horizontal position of the element.

type: IcBackToTopPositions - "center" | "left" | "right" | undefined
"right"
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
"inherit"
Property variant
Attribute variant

The variant of the button to render

type: IcBackToTopVariants - "default" | "icon" | undefined
"default"
Property target
Attribute target

The ID of the element to jump back to when the link is clicked.

Required type: string
Property position
Attribute position

The horizontal position of the element.

type: IcBackToTopPositions - "center" | "left" | "right" | undefined
Default: "right"
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
Default: "inherit"
Property variant
Attribute variant

The variant of the button to render

type: IcBackToTopVariants - "default" | "icon" | undefined
Default: "default"

CSS Custom Properties

Name Description
--footer-offset offset of x-position from footer
--ic-z-index-back-to-top z-index of back to top
--margin-left left y-position of back to top
--margin-right right y-position of back to top
--footer-offset offset of x-position from footer
--ic-z-index-back-to-top z-index of back to top
--margin-left left y-position of back to top
--margin-right right y-position of back to top

Last reviewed 31 May 2024 .
Navigated to Back to top - Intelligence Community Design System