PageHeaderBack

The way back to the parent screen, for PageHeader’s back slot. A real link: pass href, or asChild with your router’s Link. The label defaults to the localized “Back”.

Import

import { PageHeaderBack } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/page-header.

Usage

<PageHeaderBack>
  <>
          <div>
            <PageHeaderEyebrow>Sábado 11 de octubre</PageHeaderEyebrow>
            <PageHeaderTitle>
              Agenda de <span className="text-accent-word">hoy</span>
            </PageHeaderTitle>
            <PageHeaderLede>
              12 citas con 3 barberos. Quedan 2 horarios libres por la tarde.
            </PageHeaderLede>
          </div>
          <PageHeaderActions>
            <Button variant="secondary">Bloquear horario</Button>
            <Button>Nueva cita</Button>
          </PageHeaderActions>
        </>
</PageHeaderBack>

Props

Prop	Type	Default	Description
asChild	boolean	false	Renders the single child element (a router Link) with the link’s look. The child supplies the label.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Title Only
• Without Actions
• Narrow
• With Breadcrumbs
• Compact
• Back Meta Tabs
• Sticky

Source

packages/ui/src/containers/page-header/back.tsx