Photonix UI - React Components, Templates & Figma Design System

Chip

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

Preview

Chip

Usage

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

<Chip label="Chip" />

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

Basic Variants

Chips come in two main variants: outlined (default) and filled (selected).

Outline (Default)

Filled (Selected)

Basic Variants

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

<Chip label="Outline (Default)" />
<Chip label="Filled (Selected)" variant="filled" />

With Icons & Avatars

Add visual context with leading icons or user avatars.

Favorite

User Name

With Icons & Avatars

import { StarFilled } from '@photonix/icons';
import { Avatar } from '@photonix/ultimate';

<Chip label="Favorite" icon={<StarFilled />} />
<Chip label="User Name" avatar={<Avatar src="/user.jpg" />} />

Sizes & Badge

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

Medium Size

Large Size

With Badge5

Sizes & Badge

<Chip label="Medium Size" size="medium" />
<Chip label="Large Size" size="large" />
<Chip label="With Badge" badge={5} />

Interactive / Filter

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

Filter

Active Filter

Interactive / Filter

<Chip label="Filter" hasDropdown />
<Chip 
  label="Active Filter" 
  variant="filled" 
  hasDropdown 
  onClear={() => handleClear()} 
/>

Back / Next Actions

Chips can show explicit trailing action buttons for step navigation, while still keeping the main chip body intact.

Back / Next Actions

import { ChevronLeftOutline, ChevronRightOutline } from '@photonix/icons';

<Chip
  label="Previous"
  actionIcon={<ChevronLeftOutline size={16} />}
  actionLabel="Go to previous step"
  onAction={() => {}}
/>
<Chip
  label="Next"
  actionIcon={<ChevronRightOutline size={16} />}
  actionLabel="Go to next step"
  onAction={() => {}}
/>

Disabled

Chips can be disabled to prevent interaction.

Disabled

Disabled Selected

Disabled

<Chip label="Disabled" disabled />
<Chip label="Disabled Selected" variant="filled" disabled />

Chip

Preview

Component API

Chip

Variants

Basic Variants

With Icons & Avatars

Sizes & Badge

Interactive / Filter

Back / Next Actions

Disabled

On this page