---
title: Header Pattern
description: A page header with title, description, and primary action button.
icon: layout-panel-top
author:
  name: eblairmckee
  url: https://github.com/eblairmckee
mode: wide
---

A page header with a title, description, and primary action button. Use this pattern at the top of list pages, dashboard views, and resource management screens.

<ComponentPreview name="pattern-header-demo" />

## Usage Guidelines

- **Title**: Use a semantic `h1` for the page title
- **Description**: Use `text-body text-subtle` for supporting context
- **Action**: Place the primary create/add action button below the description
- **Spacing**: Use `gap-2` between heading and text, `gap-4` before the action button

## Code Example

```tsx
import { Button } from '@/components/redpanda-ui/button';

export function PageHeader() {
  return (
    <div className="flex flex-col gap-4">
      <header className="flex flex-col gap-2">
        <h1 className="text-heading-xl">Knowledge bases</h1>
        <p className="text-body text-subtle">
          Knowledge bases store and organize your documents, data, and content for AI-powered retrieval and chat. They
          enable Retrieval-Augmented Generation (RAG) by connecting language models with your specific information.
        </p>
      </header>
      <div>
        <Button>Create Knowledge Base</Button>
      </div>
    </div>
  );
}
```

## Anatomy

```
┌─────────────────────────────────────┐
│ div (flex-col gap-4)                │
│ ├── header (flex-col gap-2)         │
│ │   ├── h1.text-heading-xl           │
│ │   └── p.text-body.text-subtle        │
│ └── div                             │
│     └── Button (primary action)     │
└─────────────────────────────────────┘
```

## Best Practices

1. **Keep descriptions concise** - 1-2 sentences that explain the purpose of the page
2. **One primary action** - Use a single filled button for the main create/add action
3. **Consistent placement** - Always place the header at the top of the content area
4. **Don't include icons in action** - Icons in actions should be reserved for common, universally understood actions (close, search, menu) and should always include accessible labels. Avoid pairing primary action text with an icon.