Photonix UI - React Components, Templates & Figma Design System

Chip

Compact elements that represent an input, attribute, or action.

Preview

Design

Usage

"use client";

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

export default function ChipPreviewExample() {
    return <Chip label="Design" variant="outline" />;
}

Component API

Chip

Prop	Type	Default	Description
label	`string`	`-`	The content of the chip (text)
icon	`React.ReactNode`	`-`	Optional icon on the left
avatar	`React.ReactNode`	`-`	Optional avatar on the left
variant	`"filled" \| "outline"`	`'outline'`	Visual style variant - outline: Default unselected state - filled: Selected state (dark background)
badge	`string \| number`	`-`	Badge count/text to display after label
size	`"large" \| "medium"`	`'large'`	Size of the chip
disabled	`boolean`	`-`	Whether the chip is disabled
hasDropdown	`boolean`	`-`	Whether the chip has dropdown functionality - When true + outline: shows ChevronDownSmall - When true + filled: shows clear button (X)
onClear	`((e: React.MouseEvent) => void)`	`-`	Callback when clear button is clicked (only for filled + hasDropdown)
actionIcon	`React.ReactNode`	`-`	Optional action icon shown after the dropdown affordance
onAction	`((e: React.MouseEvent) => void)`	`-`	Callback for the optional action button
actionLabel	`string`	`-`	Accessible label for the optional action button

Variants

Chip Variants

Outline and filled chip states are shown from the same source-first example file.

Outline

Filled

Large3

Disabled

Chip Variants

"use client";

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

export default function ChipVariantsExample() {
    return (
        <Flex gap="sm" wrap>
            <Chip label="Outline" variant="outline" />
            <Chip label="Filled" variant="filled" />
            <Chip label="Large" variant="outline" size="large" badge="3" />
            <Chip label="Disabled" variant="outline" disabled />
        </Flex>
    );
}

With Icons & Avatars

Add visual context with leading icons or user avatars.

Favorite

User Name

With Icons & Avatars

"use client";

import { Avatar, AVATAR_IMAGES, Chip, Flex } from '@photonix/ultimate';
import { StarFilled } from '@photonix/icons';

export default function ChipIconsExample() {
    return (
        <Flex gap="md">
            <Chip label="Favorite" icon={<StarFilled size={16} />} />
            <Chip label="User Name" avatar={<Avatar src={AVATAR_IMAGES[0]} size="24" />} />
        </Flex>
    );
}

Sizes & Badge

Chips available in medium and large sizes, supporting notification badges.

Medium Size

Large Size

With Badge5

Sizes & Badge

"use client";

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

export default function ChipSizesBadgeExample() {
    return (
        <Flex gap="md" align="center">
            <Chip label="Medium Size" size="medium" />
            <Chip label="Large Size" size="large" />
            <Chip label="With Badge" badge={5} />
        </Flex>
    );
}

Interactive / Filter

Chips can act as filters with dropdowns or detailed removal actions.

Filter

Active Filter

Interactive / Filter

"use client";

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

export default function ChipInteractiveExample() {
    return (
        <Flex gap="md">
            <Chip label="Filter" hasDropdown />
            <Chip label="Active Filter" variant="filled" hasDropdown onClear={() => { }} />
        </Flex>
    );
}

Trailing Utility Actions

Use the optional trailing action for compact utility tasks like copy or download, without turning the chip into a navigation control.

Copy link

Download

Trailing Utility Actions

"use client";

import { Chip, Flex } from '@photonix/ultimate';
import { CopyOutline, DownloadOutline } from '@photonix/icons';

export default function ChipActionsExample() {
    return (
        <Flex gap="md">
            <Chip
                label="Copy link"
                actionIcon={<CopyOutline size={16} />}
                actionLabel="Copy resource link"
                onAction={() => { }}
            />
            <Chip
                label="Download"
                actionIcon={<DownloadOutline size={16} />}
                actionLabel="Download file"
                onAction={() => { }}
            />
        </Flex>
    );
}

Disabled

Chips can be disabled to prevent interaction.

Disabled

Disabled Selected

Disabled

"use client";

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

export default function ChipDisabledExample() {
    return (
        <Flex gap="md">
            <Chip label="Disabled" disabled />
            <Chip label="Disabled Selected" variant="filled" disabled />
        </Flex>
    );
}

Chip

Preview

Component API

Chip

Variants

Chip Variants

With Icons & Avatars

Sizes & Badge

Interactive / Filter

Trailing Utility Actions

Disabled

On this page