---
description: Exxat DS — PageHeader actions slot; View as / overflow / primary CTA patterns. Auto-attaches when editing React PageHeader callsites; the universal "one filled primary" rule lives in P3 of exxat-ux-principles.
globs: {components,lib,src}/**/*.{tsx,ts}
alwaysApply: false
appliesTo: [react]
---

# Exxat DS — page header actions

**Blueprint:** `docs/exxat-ds/blueprints/page-header.md`

## Anatomy (actions slot only)

| Control | DS pattern |
|---------|------------|
| **Primary CTA** | One **`Button`** `variant="default"` `size="lg"` (filled) — e.g. “Add student”, “Ask Leo” when it is the main action |
| **Secondary / scope** (“View as”, “All students”) | **`Button variant="outline" size="lg"`** + chevron, or **`Select`** / **`DropdownMenu`** trigger styled as outline button — **not** plain grey rectangles or unstyled `<button>` |
| **Overflow (⋯)** | **`Button variant="outline" size="icon-lg"`** (or `size="lg"` icon-only) opening **`DropdownMenu`** — Export, settings, invite |
| **Collaboration** | **`PageHeader variant="collaboration"`** face rail — not a custom avatar row |

## MUST

- Compose **`PageHeader`** + pass **`actions`** as DS **`Button`** / **`DropdownMenu`** primitives.
- Keep **one** filled primary; put Export and long-tail items under **⋯**.

## MUST NOT

- Hand-built header button rows that skip **`PageHeader`** and **`Button`** variants.
- Multiple filled primaries beside each other (e.g. “Ask Leo” + “Add student” both solid black unless product explicitly documents hierarchy — prefer outline for secondary).

## Reference

- `components/library-page-header.tsx`, Placements/Team header patterns in **`docs/exxat-ds/reference-implementations.md`**