Back Button

iOS-style back navigation button with icon and text label. Supports sizes, glass variant, and collapse animation.

Default Back Button

Preview

<button class="back-button">
  <span class="back-button-icon">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
    </svg>
  </span>
  <span class="back-button-text">Back</span>
</button>

Requires: ux.min.css

<button class="inline-flex items-center gap-1 bg-transparent border-none cursor-pointer text-primary pr-2" style="min-height: 2.75rem;">
  <span class="flex items-center justify-center shrink-0 size-6">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
    </svg>
  </span>
  <span class="whitespace-nowrap overflow-hidden text-ellipsis max-w-30">Back</span>
</button>

Requires: tw.min.css

// No JavaScript required — just a styled link/button.
// For SPA navigation:
// document.querySelector('.back-button').addEventListener('click', () => history.back());

Sizes

Preview

<div class="flex items-center gap-4">
  <button class="back-button back-button-sm">
    <span class="back-button-icon">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
    </span>
    <span class="back-button-text">Small</span>
  </button>

  <button class="back-button">
    <span class="back-button-icon">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
    </span>
    <span class="back-button-text">Default</span>
  </button>

  <button class="back-button back-button-lg">
    <span class="back-button-icon">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
    </span>
    <span class="back-button-text">Large</span>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-center gap-4">
  <button class="inline-flex items-center gap-1 bg-transparent border-none cursor-pointer text-primary text-sm" style="min-height: 2.25rem;">
    <span class="flex items-center justify-center shrink-0 size-5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
    <span class="whitespace-nowrap overflow-hidden text-ellipsis max-w-25">Small</span>
  </button>

  <button class="inline-flex items-center gap-1 bg-transparent border-none cursor-pointer text-primary text-base" style="min-height: 2.75rem;">
    <span class="flex items-center justify-center shrink-0 size-6"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
    <span class="whitespace-nowrap overflow-hidden text-ellipsis max-w-30">Default</span>
  </button>

  <button class="inline-flex items-center gap-1 bg-transparent border-none cursor-pointer text-primary text-lg" style="min-height: 2.75rem;">
    <span class="flex items-center justify-center shrink-0 size-7"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
    <span class="whitespace-nowrap overflow-hidden text-ellipsis max-w-40">Large</span>
  </button>
</div>

Requires: tw.min.css

// No JavaScript required

Icon Only & Glass

Preview

<div class="flex items-center gap-4">
  <button class="back-button back-button-icon-only">
    <span class="back-button-icon">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
    </span>
    <span class="back-button-text">Back</span>
  </button>

  <button class="back-button glass">
    <span class="back-button-icon">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
    </span>
    <span class="back-button-text">Back</span>
  </button>

  <button class="back-button glass back-button-sm">
    <span class="back-button-icon">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
    </span>
    <span class="back-button-text">Back</span>
  </button>

  <button class="back-button glass back-button-lg">
    <span class="back-button-icon">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
    </span>
    <span class="back-button-text">Back</span>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-center gap-4">
  <!-- Icon only -->
  <button class="inline-flex items-center justify-center bg-transparent border-none cursor-pointer text-primary p-1" style="min-height: 2.75rem;">
    <span class="flex items-center justify-center shrink-0 size-6"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
  </button>

  <!-- Glass (circular, frosted) -->
  <button class="inline-flex items-center justify-center rounded-full glass cursor-pointer size-9" style="color: var(--color-base-content);">
    <span class="flex items-center justify-center size-5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
  </button>

  <!-- Glass small -->
  <button class="inline-flex items-center justify-center rounded-full glass cursor-pointer size-7" style="color: var(--color-base-content);">
    <span class="flex items-center justify-center size-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
  </button>

  <!-- Glass large -->
  <button class="inline-flex items-center justify-center rounded-full glass cursor-pointer size-11" style="color: var(--color-base-content);">
    <span class="flex items-center justify-center size-6"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
  </button>
</div>

Requires: tw.min.css

// No JavaScript required

Color Variants

Preview

<div class="flex items-center gap-4 flex-wrap">
  <button class="back-button">
    <span class="back-button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
    <span class="back-button-text">Primary</span>
  </button>

  <button class="back-button back-button-dark">
    <span class="back-button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
    <span class="back-button-text">Dark</span>
  </button>

  <button class="back-button back-button-secondary">
    <span class="back-button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
    <span class="back-button-text">Secondary</span>
  </button>

  <button class="back-button back-button-disabled">
    <span class="back-button-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
    <span class="back-button-text">Disabled</span>
  </button>
</div>

Requires: ux.min.css

<div class="flex items-center gap-4 flex-wrap">
  <button class="inline-flex items-center gap-1 bg-transparent border-none cursor-pointer text-primary" style="min-height: 2.75rem;">
    <span class="flex items-center justify-center shrink-0 size-6"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
    <span>Primary</span>
  </button>
  <button class="inline-flex items-center gap-1 bg-transparent border-none cursor-pointer text-base-content" style="min-height: 2.75rem;">
    <span class="flex items-center justify-center shrink-0 size-6"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
    <span>Dark</span>
  </button>
  <button class="inline-flex items-center gap-1 bg-transparent border-none cursor-pointer text-base-content/60" style="min-height: 2.75rem;">
    <span class="flex items-center justify-center shrink-0 size-6"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
    <span>Secondary</span>
  </button>
  <button class="inline-flex items-center gap-1 bg-transparent border-none cursor-pointer text-primary opacity-40 pointer-events-none" style="min-height: 2.75rem;">
    <span class="flex items-center justify-center shrink-0 size-6"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg></span>
    <span>Disabled</span>
  </button>
</div>

Requires: tw.min.css

// No JavaScript required

Classes Reference

Class	Description
.back-button	Base back button
.back-button-icon	Icon container
.back-button-text	Text label (truncated)
.back-button-sm	Small size
.back-button-lg	Large size
.back-button-icon-only	Hide text, show icon only
.back-button-icon-end	Icon on right side (forward)
.back-button-dark	Dark text color
.back-button-secondary	Secondary (muted) text
.back-button-light	White text (for dark backgrounds)
.back-button-disabled	Disabled state
.back-button-animate-in	Slide-in entrance animation
.back-button-collapsible	Enable collapse animation on text
.back-button-collapsed	Collapse text to icon-only
.back-button.glass	Frosted glass circular button