Photonix

SectionHeader

A versatile header for labeling content sections, often used above tables or cards.

Preview

Users Activity

Usage
import { SectionHeader, Button, Flex } from '@photonix/ultimate';
import { AddOutline } from '@photonix/icons';

<SectionHeader
  title="Team Members"
  trailingActions={
    <Flex gap="xs">
      <Button variant="secondary" size="small">Export</Button>
      <Button variant="primary" size="small" leadingIcon={<AddOutline />}>
        Add Member
      </Button>
    </Flex>
  }
/>

Component API

SectionHeader

Prop
Type
Default
Description
title
React.ReactNode
-
Section title
description
React.ReactNode
-
Optional description or subtitle
size
"large" | "medium"
'medium'
Size variant affecting title typography
contextualActions
React.ReactNode
-
Contextual actions that appear based on context (e.g., when rows are selected in a table). Rendered immediately after the title.
trailingActions
React.ReactNode
-
Trailing actions displayed on the right side (e.g., filter buttons, tabs).
className
string
-
Additional CSS class

Variants

Basic Title

Standard section header with just a title.

Account Settings

Basic Title
<SectionHeader title="Account Settings" />

Contextual Actions

Small icon buttons that provide actions relevant to the section title.

Project Files

Contextual Actions
<SectionHeader 
  title="Project Files" 
  contextualActions={
    <Flex gap="none">
      <IconButton icon={<DownloadOutline />} variant="tertiary" size="small" />
      <IconButton icon={<StarOutline />} variant="tertiary" size="small" />
    </Flex>
  } 
/>

Trailing Actions

Standard buttons placed on the right side of the header.

Active Tasks

Trailing Actions
<SectionHeader 
  title="Active Tasks" 
  trailingActions={<Button variant="primary" size="small">View All</Button>} 
/>

With Segmented Control

Use a SegmentedControl to filter data within the section.

Filter results

With Segmented Control
<SectionHeader 
  title="Filter results" 
  trailingActions={
    <SegmentedControl
      size="small"
      options={[
        { value: 'all', label: 'All' },
        { value: 'active', label: 'Active' }
      ]}
      value={filter}
      onChange={setFilter}
    />
  } 
/>

With Dropdown

Dropdowns are suitable for switching time ranges or categories.

Sales Analytics

This Week
With Dropdown
<SectionHeader 
  title="Sales Analytics" 
  trailingActions={
    <Dropdown 
      options={[
        { value: 'day', label: 'Today' },
        { value: 'week', label: 'This Week' }
      ]} 
      value={period}
      onChange={setPeriod}
    />
  } 
/>

Large Variant

The large size increases the title typography and vertical padding.

Dashboard Overview

Large Variant
<SectionHeader title="Dashboard Overview" size="large" />

On this page

Preview
Component API
Variants
Basic Title
Contextual Actions
Trailing Actions
With Segmented Control
With Dropdown
Large Variant
Photonix UI - React Components, Templates & Figma Design System