Back to Top

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

The Back to Top button provides a quick way to scroll to the top of the page, appearing after the user scrolls down.

Usage

Basic Usage

↑

Open Editor

import { Btt } from "@paramanu/navigation-react"

export default function App() {
return <Btt visible />
}

<button class="pm-btt pm-btt--md pm-btt--bottom-right pm-btt--visible" type="button" aria-label="Back to top">&uarr;</button>

Guidelines

Accessibility

• Uses aria-label="Back to top" for screen readers.
• Rendered as a <button type="button">.
• Show only after the user has scrolled past a threshold.

Best Practices

• Position in the bottom-right corner by default.
• Toggle visibility based on scroll position.

API

Btt Props

Prop	Type	Default	Description
size	"sm" | "md" | "lg"	"md"	Size preset
position	"bottom-right" | "bottom-left" | "bottom-center"	"bottom-right"	Screen position
visible	boolean	true	Visibility state

CSS Classes

Class	Description
pm-btt	Root element
pm-btt--visible	Visible state
pm-btt--bottom-right	Bottom-right position
pm-btt--sm	Small size
pm-btt--lg	Large size