---
title: "Section header"
description: "Names a section of a page: SectionHeader for a titled section with its one action, SectionEyebrow for the quiet uppercase name of a panel."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Section header

## Section with an action

```tsx
import { Button, SectionHeader } from '@arbol-ai/ui';

<SectionHeader
  action={
    <Button size="sm" variant="outline">
      Add hours
    </Button>
  }
  description="When your agents answer calls and book appointments."
  title="Opening hours"
/>
```

## Panel eyebrow

For a panel whose content carries the weight, such as a feed of recent calls.

```tsx
import { SectionEyebrow } from '@arbol-ai/ui';

<div className="rounded-card max-w-sm border p-4">
  <div className="flex items-baseline justify-between gap-4">
    <SectionEyebrow>Recent calls</SectionEyebrow>
    <a className="text-muted-foreground hover:text-foreground text-xs" href="#/section-header">
      View all
    </a>
  </div>
  <p className="mt-3 text-sm">Laura Gómez booked a check-up for Tuesday.</p>
</div>
```

## Source

The examples above are [`src/components/section-header/section-header.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/section-header/section-header.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/layout/section-header/index.mdx