# PageHeaderBack

> The way back to the parent screen, for `PageHeader`'s `back` slot.

Source: https://ui.jcsoftdev.com/docs/components/page-header-back

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/containers-pageheader--default)
- [Title Only](/storybook/?path=/story/containers-pageheader--title-only)
- [Without Actions](/storybook/?path=/story/containers-pageheader--without-actions)
- [Narrow](/storybook/?path=/story/containers-pageheader--narrow)
- [With Breadcrumbs](/storybook/?path=/story/containers-pageheader--with-breadcrumbs)
- [Compact](/storybook/?path=/story/containers-pageheader--compact)
- [Back Meta Tabs](/storybook/?path=/story/containers-pageheader--back-meta-tabs)
- [Sticky](/storybook/?path=/story/containers-pageheader--sticky)

## Source

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