Skip to main content

BackButton

BackButton

Labelled "← Back to …" link or button for returning to the previous list or view

Tags: component navigation back link

View Demo

BackButton renders a small ← Back to {label} control. The text is visible on purpose: an icon-only arrow is easy to confuse with other chevron controls, such as the sidebar collapse toggle in the app header. Long labels truncate on one line, and the full text stays available as the tooltip.

ActionHeader uses BackButton for backHref/backLabel, so most detail pages don't need it directly. Use it for back links outside a page header, such as a not-found state or a panel that drills into a sub-view.

Import​

<script>
  import { BackButton } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<!-- Link -->
<BackButton href="/marketing/signs" label="signs" />

<!-- Button (no href) -->
<BackButton onclick={showList} label="all links" />

<!-- Plain "Back" -->
<BackButton href="/" />

Props​

Prop Type Default Description
href string - Destination; renders an <a>
onclick (event: MouseEvent) => void - Click handler; renders a <button> when there's no href
label string - What Back returns to: "signs" → "Back to signs"
class string - Additional classes

Other attributes (e.g. data-tour) pass through to the element.

Guidelines​

  • Name the destination ("Back to communities"), not just "Back", when you know it.
  • Keep it above or before the title, away from the app header's sidebar toggle.
  • Don't use an icon-only back arrow in app pages.

Accessibility​

  • The visible text is the accessible name.
  • Renders a real link when it navigates, so Ctrl/middle-click opens a new tab.
  • Has a visible focus ring.
On this page