Photonix

ChipBar

Horizontal bar of chips, often used for filters.

Preview

Filters
All
Design
Engineering
Growth
Support
Finance
Usage
"use client";

import { Chip, ChipBar } from '@photonix/ultimate';
import { OptionOutline } from '@photonix/icons';

export default function ChipBarBasicExample() {
    return (
        <ChipBar leading={<Chip label="Filters" icon={<OptionOutline />} />} padded size="medium">
            <Chip label="All" variant="filled" />
            <Chip label="Design" />
            <Chip label="Engineering" />
            <Chip label="Growth" />
            <Chip label="Support" />
            <Chip label="Finance" />
        </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
"use client";

import { Chip, ChipBar } from '@photonix/ultimate';
import { OptionOutline } from '@photonix/icons';

export default function ChipBarLeadingExample() {
    return (
        <ChipBar leading={<Chip label="Filter" icon={<OptionOutline />} />}>
            <Chip label="Price" variant="outline" />
            <Chip label="Type" variant="outline" />
            <Chip label="Status" variant="outline" />
            <Chip label="Date" variant="outline" />
            <Chip label="Sort" variant="outline" />
        </ChipBar>
    );
}

Sizes

ChipBar supports large (default) and medium sizes.

Large (Default)
Chip 2
Chip 3
Medium Size
Chip 2
Chip 3
Sizes
"use client";

import { Box, Chip, ChipBar } from '@photonix/ultimate';

export default function ChipBarSizesExample() {
    return (
        <Box w="100%" display="flex" flexDirection="column" gap="md">
            <ChipBar size="large">
                <Chip label="Large (Default)" variant="filled" color="primary" />
                <Chip label="Chip 2" variant="outline" />
                <Chip label="Chip 3" variant="outline" />
            </ChipBar>

            <ChipBar size="medium">
                <Chip label="Medium Size" variant="filled" color="primary" />
                <Chip label="Chip 2" variant="outline" />
                <Chip label="Chip 3" variant="outline" />
            </ChipBar>
        </Box>
    );
}

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
AI
SaaS
Remote Work
Scrollable
"use client";

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

const labels = [
    'All', 'Trending', 'Design', 'Development', 'Business',
    'Marketing', 'Photography', 'Music', 'Education',
    'Lifestyle', 'Gaming', 'Health', 'Finance', 'Crypto',
    'AI', 'SaaS', 'Remote Work',
];

export default function ChipBarScrollableExample() {
    return (
        <ChipBar>
            {labels.map((label) => (
                <Chip key={label} label={label} variant="outline" />
            ))}
        </ChipBar>
    );
}

On this page

Preview
Component API
Variants
Leading Content
Sizes
Scrollable
Photonix UI - React Components, Templates & Figma Design System