Photonix UI - React Components, Templates & Figma Design System

ChipBar

Horizontal bar of chips, often used for filters.

Preview

All

Unread

Starred

Archived

Trash

Spam

Drafts

Sent

Usage

const [active, setActive] = useState('All');

<ChipBar>
  {['All', 'Unread', 'Starred', 'Archived', 'Trash', 'Spam', 'Drafts', 'Sent'].map(label => (
    <Chip 
      key={label}
      label={label} 
      variant={active === label ? 'filled' : 'outline'}
      color={active === label ? 'primary' : 'neutral'}
      onClick={() => setActive(label)}
    />
  ))}
</ChipBar>

Component API

ChipBar

Prop	Type	Default	Description
leading	`React.ReactNode`	`-`	Element to show on the left (e.g., Filter button)
children	`React.ReactNode`	`-`	Content (Chips) to be scrollable
showDivider	`boolean`	`true`	Whether to show a divider after the leading element
size	`"large" \| "medium"`	`'large'`	Size of the ChipBar - large: 60px height (default) - medium: 52px height
sticky	`boolean`	`-`	Whether the ChipBar is sticky (position sticky with elevator bg and shadow when stuck)
stuck	`boolean`	`-`	Optional externally controlled stuck state
padded	`string \| number \| boolean`	`-`	Whether the ChipBar has horizontal padding (16px default), or custom value

Variants

Leading Content

Add a leading element, such as a filter button, to the start of the bar.

Filter

Price

Type

Status

Date

Sort

Leading Content

import { OptionOutline } from '@photonix/icons';

<ChipBar
  leading={<Chip label="Filter" icon={<OptionOutline />} />}
>
  <Chip label="Price" />
  <Chip label="Type" />
  <Chip label="Status" />
</ChipBar>

Sizes

ChipBar supports large (default) and medium sizes.

Large (Default)

Chip 2

Chip 3

Medium Size

Chip 2

Chip 3

Sizes

<ChipBar size="large">...</ChipBar>
<ChipBar size="medium">...</ChipBar>

Scrollable

ChipBar automatically handles horizontal scrolling and displays navigation buttons on desktop when content overflows. It also applies a fade effect to indicate more content.

All

Trending

Design

Development

Business

Marketing

Photography

Music

Education

Lifestyle

Gaming

Health

Finance

Crypto

SaaS

Remote Work

Scrollable

<ChipBar>
  {[
    'All', 'Trending', 'Design', 'Development', 'Business', 
    'Marketing', 'Photography', 'Music', 'Education', 
    'Lifestyle', 'Gaming', 'Health', 'Finance', 'Crypto', 
    'AI', 'SaaS', 'Remote Work'
  ].map(label => (
    <Chip key={label} label={label} variant="outline" />
  ))}
</ChipBar>

ChipBar

Preview

Component API

ChipBar

Variants

Leading Content

Sizes

Scrollable

On this page