Header Pattern

A page header with title, description, and primary action button.

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.

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

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.