Skip to main content

Go Back Button

Go Back Button is a compact navigation control that goes back one step in the browser history. It is built on MUI's IconButton and Tooltip and uses TanStack Router's useRouter().history.back().

Use it in app bars, detail pages, or forms to let users return to the previous screen. The button shows an arrow-back icon and a "Go Back to Previous Page" tooltip by default.

Import​

import { GoBackButton } from '@js-smart/react-kit';

Basic usage​

<GoBackButton />

With custom color​

<GoBackButton color="primary" />

Accessibility​

The icon button uses aria-label from the ariaLabel prop, or falls back to "Go back to previous page". Set ariaLabel when you need a more specific label for screen readers.

Peer dependencies​

GoBackButton uses MUI's IconButton, Tooltip, TanStack Router's useRouter, and the ArrowBackIos icon. Ensure your project has @mui/material, @mui/icons-material, and @tanstack/react-router installed (see Installation).

Props​

PropTypeDefaultDescription
namestring—Native name attribute.
childrenReactNode—Optional content rendered after the icon.
color'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning''primary'MUI IconButton color.
ariaLabelstring'Go back to previous page'Accessible label for the icon button.