Photonix

SectionHeader

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

Preview

Users Activity

Usage
"use client";

import { Button, Flex, IconButton, SectionHeader, Box } from '@photonix/ultimate';
import { AddOutline, DownloadOutline, MoreVerticalOutline, SearchOutline, StarOutline } from '@photonix/icons';

const sampleContextual = (
    <Flex gap="none">
        <IconButton icon={<DownloadOutline />} variant="tertiary" size="small" aria-label="Download" />
        <IconButton icon={<StarOutline />} variant="tertiary" size="small" aria-label="Star" />
        <IconButton icon={<SearchOutline />} variant="tertiary" size="small" aria-label="Search" />
        <IconButton icon={<MoreVerticalOutline />} variant="tertiary" size="small" aria-label="More" />
    </Flex>
);

export default function SectionHeaderBasicExample() {
    return (
        <Box w="100%" border="1px dashed var(--border-neutral-tertiary)" borderRadius="2xs">
            <SectionHeader
                title="Users Activity"
                contextualActions={sampleContextual}
                trailingActions={
                    <Flex gap="xs">
                        <Button variant="secondary" size="small">Export csv</Button>
                        <Button variant="primary" size="small" leadingIcon={<AddOutline />}>New Entry</Button>
                    </Flex>
                }
            />
        </Box>
    );
}

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
"use client";

import { SectionHeader } from '@photonix/ultimate';

export default function SectionHeaderVariantBasicExample() {
    return <SectionHeader title="Account Settings" />;
}

Contextual Actions

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

Project Files

Contextual Actions
"use client";

import { Flex, IconButton, SectionHeader } from '@photonix/ultimate';
import { DownloadOutline, StarOutline } from '@photonix/icons';

export default function SectionHeaderVariantContextualExample() {
    return (
        <SectionHeader
            title="Project Files"
            contextualActions={
                <Flex gap="none">
                    <IconButton icon={<DownloadOutline />} variant="tertiary" size="small" aria-label="Download" />
                    <IconButton icon={<StarOutline />} variant="tertiary" size="small" aria-label="Star" />
                </Flex>
            }
        />
    );
}

Trailing Actions

Standard buttons placed on the right side of the header.

Active Tasks

Trailing Actions
"use client";

import { Button, SectionHeader } from '@photonix/ultimate';

export default function SectionHeaderVariantTrailingExample() {
    return <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
"use client";

import { SectionHeader, SegmentedControl } from '@photonix/ultimate';
import { useState } from 'react';

export default function SectionHeaderVariantSegmentedExample() {
    const [filter, setFilter] = useState('all');

    return (
        <SectionHeader
            title="Filter results"
            trailingActions={
                <SegmentedControl
                    options={[
                        { value: 'all', label: 'All' },
                        { value: 'active', label: 'Active' },
                        { value: 'done', label: 'Done' },
                    ]}
                    value={filter}
                    onChange={setFilter}
                />
            }
        />
    );
}

With Dropdown

Dropdowns are suitable for switching time ranges or categories.

Sales Analytics

This Week
With Dropdown
"use client";

import { Dropdown, SectionHeader } from '@photonix/ultimate';
import { useState } from 'react';

export default function SectionHeaderVariantDropdownExample() {
    const [period, setPeriod] = useState('week');

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

Large Variant

The large size increases the title typography and vertical padding.

Dashboard Overview

Large Variant
"use client";

import { SectionHeader } from '@photonix/ultimate';

export default function SectionHeaderVariantLargeExample() {
    return <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