Back to Top

The BackToTop button provides users with a quick way to scroll back to the top of the page. It appears only after the user scrolls down and automatically adjusts its position to avoid overlapping with the footer.

Example

Preview

Scroll down to bring into view.

Code

import { BackToTop } from '@hv/ui/back-to-top';

export default function BackToTopExample({ ...props }) {
  return <BackToTop {...props} />;
}

Configurations

The BackToTop button inherits all standard button props, making it fully customizable with options for styling, size, icons, loading states, and event handling.

See the Button component documentation for more details on the full range of options available through inherited props.

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components.

<BackToTop className='ring-2' title='Back to top' />