Photonix UI - React Components, Templates & Figma Design System

Toolbar

Container for tool actions.

Preview

Usage

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

<Toolbar>
  <Button>Bold</Button>
  <Button>Italic</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

<Toolbar fixed={false}>
  <Flex justify="between" align="center" w="100%">
    <Flex gap="none">
      <IconButton icon={<Menu />} variant="tertiary" aria-label="Menu" />
      <IconButton icon={<Search />} variant="tertiary" aria-label="Search" />
      <IconButton icon={<Notification />} variant="tertiary" aria-label="Notifications" />
    </Flex>
    <IconButton icon={<Add />} variant="primary" aria-label="Add" />
  </Flex>
</Toolbar>

Summary & Action

Commonly used for checkout or financial summaries.

Summary & Action

<Toolbar fixed={false}>
  <Flex justify="between" align="center" w="100%">
    <Flex direction="column">
      <Text variant="title-md">1,255.05 $</Text>
      <Text variant="body-sm" color="secondary">Billing Period</Text>
    </Flex>
    <Button variant="primary">Pay Now</Button>
  </Flex>
</Toolbar>

Contextual Selection

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

Contextual Selection

<Toolbar fixed={false}>
  <Flex justify="between" align="center" w="100%">
    <Flex gap="sm" align="center">
      <IconButton icon={<Close />} variant="tertiary" aria-label="Close" />
      <Text variant="label-lg">3 selected</Text>
    </Flex>
    <Flex gap="none">
      <IconButton icon={<Download />} variant="tertiary" aria-label="Download" />
      <IconButton icon={<Link />} variant="tertiary" aria-label="Link" />
      <IconButton icon={<Delete />} variant="tertiary" aria-label="Delete" />
    </Flex>
  </Flex>
</Toolbar>

Consent Flows

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

Consent Flows

<Toolbar fixed={false}>
  <Checkbox label="I agree to terms" />
  <Flex gap="sm">
    <Button style={{ flex: 1 }}>Accept</Button>
    <Button variant="secondary" style={{ flex: 1 }}>Decline</Button>
  </Flex>
</Toolbar>

Smart Input

AI-driven interfaces combining chip suggestions and prompt fields.

Smart Input

<Toolbar fixed={false} style={{ padding: 0 }}>
  <Flex direction="column" gap="sm" p="md">
    <ChipBar>
      <Chip label="Translate" />
      <Chip label="Summarize" />
    </ChipBar>
    <PromptField placeholder="Ask Photonix" />
  </Flex>
</Toolbar>

Desktop & Responsive Width

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

Desktop & Responsive Width

<Toolbar maxWidth="desktop" fixed={false}>...</Toolbar>
<Toolbar maxWidth="tablet" fixed={false}>...</Toolbar>

Toolbar

Preview

Component API

Toolbar

Variants

Action Icons

Summary & Action

Contextual Selection

Consent Flows

Smart Input

Desktop & Responsive Width

On this page