Photonix

Toolbar

Container for tool actions.

Preview

Usage
"use client";

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

export default function ToolbarBasicExample() {
    return (
        <Toolbar fixed={false} style={{ position: 'relative' }}>
            <Button size="medium">Draft</Button>
            <Button variant="secondary" size="medium">Publish</Button>
            <Button variant="tertiary" size="medium">Delete</Button>
        </Toolbar>
    );
}

Component API

Toolbar

Prop
Type
Default
Description
children
React.ReactNode
-
Content of the bar
fixed
boolean
true
Fixed positioning (default: true). Set to false to use as a static block.
autoElevate
boolean
true
Auto-elevation behavior (default: true when fixed). When true, shows shadow and top divider when there's scrollable content above.
maxWidth
number | "auto" | "full" | "mobile" | "tablet" | "desktop"
'auto'
Maximum width of the bar. - 'auto': Responsive based on viewport (default) - mobile: 360px, tablet: 600px, desktop: 900px - 'mobile': 360px - 'tablet': 600px - 'desktop': 900px - 'full': 100% (no max-width) - number: custom px value
elevated
boolean
-
Controlled elevation state. If provided, manual scroll detection is disabled.

Variants

Action Icons

Standard mobile bottom app bar with navigation on left and primary action on right.

Action Icons
"use client";

import { Flex, IconButton, Toolbar } from '@photonix/ultimate';
import { AddOutline, BellOutline, MenuOutline, SearchOutline } from '@photonix/icons';

export default function ToolbarVariantActionsExample() {
    return (
        <div style={{ width: '100%', maxWidth: '360px', margin: '0 auto', border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
            <Toolbar fixed={false}>
                <Flex justify="between" align="center" w="100%">
                    <Flex gap="none">
                        <IconButton icon={<MenuOutline />} variant="tertiary" size="large" aria-label="Menu" />
                        <IconButton icon={<SearchOutline />} variant="tertiary" size="large" aria-label="Search" />
                        <IconButton icon={<BellOutline />} variant="tertiary" size="large" aria-label="Notifications" />
                    </Flex>
                    <IconButton icon={<AddOutline />} variant="primary" size="large" aria-label="Add" />
                </Flex>
            </Toolbar>
        </div>
    );
}

Summary & Action

Commonly used for checkout or financial summaries.

1,255,368.05 $

Dec 11, 2025 - Jan 15, 2026

Summary & Action
"use client";

import { Button, Flex, Text, Toolbar } from '@photonix/ultimate';

export default function ToolbarVariantSummaryExample() {
    return (
        <div style={{ width: '100%', maxWidth: '360px', margin: '0 auto', border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
            <Toolbar fixed={false}>
                <Flex justify="between" align="center" w="100%">
                    <Flex direction="column">
                        <Text variant="title-md">1,255,368.05 $</Text>
                        <Text variant="body-sm" color="secondary">Dec 11, 2025 - Jan 15, 2026</Text>
                    </Flex>
                    <Button variant="primary">Checkout</Button>
                </Flex>
            </Toolbar>
        </div>
    );
}

Contextual Selection

Appears when items are selected. Shows selection count and specific actions.

3 selected

Contextual Selection
"use client";

import { Flex, IconButton, Text, Toolbar } from '@photonix/ultimate';
import { CloseOutline, DownloadOutline, LinkOutline, TrashOutline } from '@photonix/icons';

export default function ToolbarVariantContextualExample() {
    return (
        <div style={{ width: '100%', maxWidth: '360px', margin: '0 auto', border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
            <Toolbar fixed={false}>
                <Flex justify="between" align="center" w="100%">
                    <Flex gap="xs" align="center">
                        <IconButton icon={<CloseOutline />} variant="tertiary" size="large" aria-label="Close" />
                        <Text variant="label-lg">3 selected</Text>
                    </Flex>
                    <Flex gap="none">
                        <IconButton icon={<DownloadOutline />} variant="tertiary" size="large" aria-label="Download" />
                        <IconButton icon={<LinkOutline />} variant="tertiary" size="large" aria-label="Link" />
                        <IconButton icon={<TrashOutline />} variant="tertiary" size="large" aria-label="Delete" />
                    </Flex>
                </Flex>
            </Toolbar>
        </div>
    );
}

Consent Flows

Used for T&C agreements with horizontal or vertical button layouts.

Consent Flows
"use client";

import { Button, Checkbox, Flex, Toolbar } from '@photonix/ultimate';

export default function ToolbarVariantConsentExample() {
    return (
        <div style={{ width: '100%', maxWidth: '360px', margin: '0 auto', border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
            <Toolbar fixed={false}>
                <Checkbox label="I agree to the terms of use" />
                <Flex gap="2xs" w="100%">
                    <Button variant="secondary" style={{ flex: 1 }}>Decline</Button>
                    <Button style={{ flex: 1 }}>Accept</Button>
                </Flex>
            </Toolbar>
        </div>
    );
}

Smart Input

AI-driven interfaces combining chip suggestions and prompt fields.

Translate
Summarize
Code
Explain
Smart Input
"use client";

import { Chip, ChipBar, Flex, PromptField, Toolbar } from '@photonix/ultimate';

export default function ToolbarVariantInputExample() {
    return (
        <div style={{ width: '100%', maxWidth: '360px', margin: '0 auto', border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
            <Toolbar fixed={false} style={{ padding: 0 }}>
                <Flex direction="column" gap="xs" p="sm" w="100%">
                    <ChipBar>
                        <Chip label="Translate" onClick={() => {}} />
                        <Chip label="Summarize" onClick={() => {}} />
                        <Chip label="Code" onClick={() => {}} />
                        <Chip label="Explain" onClick={() => {}} />
                    </ChipBar>
                    <PromptField placeholder="Ask Photonix..." />
                </Flex>
            </Toolbar>
        </div>
    );
}

Desktop & Responsive Width

Use maxWidth prop to control the width of the bar on larger screens.

DESKTOP WIDTH (900px)

TABLET WIDTH (600px)

Desktop & Responsive Width
"use client";

import { Button, Flex, Text, Toolbar } from '@photonix/ultimate';

export default function ToolbarVariantDesktopExample() {
    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '100%' }}>
            <div style={{ border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
                <Toolbar fixed={false} maxWidth="desktop">
                    <Flex justify="between" align="center" w="100%">
                        <Text weight="bold">DESKTOP WIDTH (900px)</Text>
                        <Flex gap="sm">
                            <Button variant="secondary">Cancel</Button>
                            <Button variant="primary">Save Changes</Button>
                        </Flex>
                    </Flex>
                </Toolbar>
            </div>
            <div style={{ border: '1px solid var(--border-neutral-tertiary)', borderRadius: '8px', overflow: 'hidden' }}>
                <Toolbar fixed={false} maxWidth="tablet">
                    <Flex justify="between" align="center" w="100%">
                        <Text weight="bold">TABLET WIDTH (600px)</Text>
                        <Button variant="primary">Action</Button>
                    </Flex>
                </Toolbar>
            </div>
        </div>
    );
}

On this page

Preview
Component API
Variants
Action Icons
Summary & Action
Contextual selection
Consent flows
Smart Input
Desktop & width
Photonix UI - React Components, Templates & Figma Design System