Header Pattern

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.

Open in

Loading component...

Usage Guidelines

Title: Use Heading level 1 for the page title
Description: Use muted Text variant 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

import { Button } from "@/components/redpanda-ui/button"
import { Heading, Text } from "@/components/redpanda-ui/typography"

export function PageHeader() {
  return (
    <div className="flex flex-col gap-4">
      <header className="flex flex-col gap-2">
        <Heading level={1}>Knowledge Bases</Heading>
        <Text variant="muted">
          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.
        </Text>
      </header>
      <div>
        <Button>
          Create Knowledge Base
        </Button>
      </div>
    </div>
  )
}

Anatomy

┌─────────────────────────────────────┐
│ div (flex-col gap-4)                │
│ ├── header (flex-col gap-2)         │
│ │   ├── Heading level={1}           │
│ │   └── Text variant="muted"        │
│ └── div                             │
│     └── Button (primary action)     │
└─────────────────────────────────────┘

Best Practices

Keep descriptions concise - 1-2 sentences that explain the purpose of the page
One primary action - Use a single filled button for the main create/add action
Consistent placement - Always place the header at the top of the content area
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.

Usage Guidelines

Code Example

Anatomy

Best Practices

On this page