Chip

The Chip component displays compact elements that represent an input, attribute, or action. Supports different colors, sizes, and interactive features like removal. Inner label accepts the full Text-prop API via labelProps.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁸⁾

Properties

⁽³¹⁾

Playground

Basics

Wrap any label in a Chip to render a compact tag — the default filled variant and primary color apply automatically.

Loading demo…

import
 
{
 
Chip
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
gap
=
{
8
}
 
wrap
=
"wrap"
>
      
<Chip
>
Design
</Chip
>
      
<Chip
>
Engineering
</Chip
>
      
<Chip
>
Research
</Chip
>
    
</Row
>
  
)
}

Semantic colors

Map the color prop to semantic tokens like primary, success, warning, error, or gray so Chips inherit your design system palette without inline styles.

Loading demo…

import
 
{
 
Chip
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
gap
=
{
8
}
 
wrap
=
"wrap"
>
      
<Chip
 
color
=
"primary"
>
Primary
</Chip
>
      
<Chip
 
color
=
"success"
>
Success
</Chip
>
      
<Chip
 
color
=
"warning"
>
Warning
</Chip
>
      
<Chip
 
color
=
"error"
>
Error
</Chip
>
      
<Chip
 
color
=
"gray"
>
Gray
</Chip
>
    
</Row
>
  
)
}

Size scale

Select a size from xs through 3xl to match the Chip density with the surrounding controls.

Loading demo…

import
 
{
 
Block
,
 
Chip
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
SIZES
 
=
 
[
'xs'
,
 
'sm'
,
 
'md'
,
 
'lg'
,
 
'xl'
,
 
'2xl'
,
 
'3xl'
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
align
=
"center"
 
gap
=
"lg"
 
wrap
=
"wrap"
>
      
{
SIZES
.
map
(
(
size
)
 
=>
 
(
        
<Block
 
key
=
{
size
}
 
align
=
"center"
>
          
<Chip
 
size
=
{
size
}
>
Chip
</Chip
>
          
<Text
 
variant
=
"small"
>
{
size
}
</Text
>
        
</Block
>
      
)
)
}
    
</Row
>
  
)
;
}

Variant styles

Choose a variant such as filled, outline, light, subtle, or gradient to adjust visual weight without changing the Chip label or color.

surface is the neutral option: it fills from the theme's background tokens instead of the color palette, landing one step darker than whatever it sits on in both light and dark. That recessed read makes it the right pick for input tokens, filter pills, and other chrome that shouldn't look like a status color.

Loading demo…

import
 
{
 
Chip
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
gap
=
{
8
}
 
wrap
=
"wrap"
>
      
<Chip
 
variant
=
"filled"
 
color
=
"primary"
>
        
Filled
      
</Chip
>
      
<Chip
 
variant
=
"outline"
 
color
=
"primary"
>
        
Outline
      
</Chip
>
      
<Chip
 
variant
=
"light"
 
color
=
"primary"
>
        
Light
      
</Chip
>
      
<Chip
 
variant
=
"subtle"
 
color
=
"primary"
>
        
Subtle
      
</Chip
>
      
<Chip
 
variant
=
"surface"
>
        
Surface
      
</Chip
>
      
<Chip
 
variant
=
"gradient"
 
color
=
"primary"
>
        
Gradient
      
</Chip
>
    
</Row
>
  
)
}

Status dot

Add a leading status dot with the dot prop. It defaults to the chip's resolved text color; override it with dotColor.

Loading demo…

import
 
{
 
Block
,
 
Chip
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 
fullWidth
=
{
false
}
>
      
<Row
 
gap
=
"xs"
 
wrap
=
"wrap"
 
align
=
"center"
>
        
<Chip
 
variant
=
"filled"
 
color
=
"success"
 dot
>
Active
</Chip
>
        
<Chip
 
variant
=
"light"
 
color
=
"warning"
 dot
>
Pending
</Chip
>
        
<Chip
 
variant
=
"outline"
 
color
=
"error"
 dot
>
Failed
</Chip
>
        
<Chip
 
variant
=
"subtle"
 
color
=
"gray"
 dot
>
Draft
</Chip
>
      
</Row
>
      
<Row
 
gap
=
"xs"
 
wrap
=
"wrap"
 
align
=
"center"
>
        
<Chip
 
variant
=
"light"
 
color
=
"gray"
 
dotColor
=
"#22C55E"
 dot
>
Online
</Chip
>
        
<Chip
 
variant
=
"light"
 
color
=
"gray"
 
dotColor
=
"#F59E0B"
 dot
>
Away
</Chip
>
        
<Chip
 
variant
=
"light"
 
color
=
"gray"
 
dotColor
=
"#EF4444"
 dot
>
Busy
</Chip
>
      
</Row
>
      
<Text
 
size
=
"xs"
 
color
=
"muted"
>
        
Use
 
<Text
 
size
=
"xs"
 
weight
=
"600"
>
dot
</Text
>
 to toggle the indicator and
{
' '
}
        
<Text
 
size
=
"xs"
 
weight
=
"600"
>
dotColor
</Text
>
 to set a custom color
.
      
</Text
>
    
</Block
>
  
)
}

Shadow depth

Use the shadow prop from none to xl when a Chip needs extra elevation to stand out from nearby content.

Loading demo…

import
 
{
 
Chip
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
gap
=
{
8
}
 
wrap
=
"wrap"
>
      
<Chip
 
shadow
=
"none"
>
No
 
Shadow
</Chip
>
      
<Chip
 
shadow
=
"xs"
>
XS
 
Shadow
</Chip
>
      
<Chip
 
shadow
=
"sm"
>
SM
 
Shadow
</Chip
>
      
<Chip
 
shadow
=
"md"
>
MD
 
Shadow
</Chip
>
      
<Chip
 
shadow
=
"lg"
>
LG
 
Shadow
</Chip
>
      
<Chip
 
shadow
=
"xl"
>
XL
 
Shadow
</Chip
>
    
</Row
>
  
)
}

Removable tags

Provide an onRemove handler to turn Chips into editable tags; the component renders a dismiss icon and calls your callback with no extra wiring.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
import
 
{
 
Block
,
 
Chip
 
}
 
from
 
'@platform-blocks/react-ui-library'
 
const
 initialSports 
=
 
[
  
{
 label
:
 
'Soccer'
,
 emoji
:
 
'⚽'
 
}
,
  
{
 label
:
 
'Basketball'
,
 emoji
:
 
'🏀'
 
}
,
  
{
 label
:
 
'Tennis'
,
 emoji
:
 
'🎾'
 
}
,
]
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
chips
,
 setChips
]
 
=
 
useState
(
initialSports
)
 
  
const
 handleRemove 
=
 
(
chipToRemove
:
 
string
)
 
=>
 
{
    
setChips
(
(
current
)
 
=>
 current
.
filter
(
(
chip
)
 
=>
 chip
.
label 
!==
 chipToRemove
)
)
  
}
 
  
return
 
(
    
<Block
>
      
{
chips
.
map
(
(
chip
)
 
=>
 
(
        
<Chip
          
key
=
{
chip
.
label
}
          
onRemove
=
{
(
)
 
=>
 
handleRemove
(
chip
.
label
)
}
        
>
          
{
chip
.
label
}
        
</Chip
>
      
)
)
}
    
</Block
>
  
)
}

Theme Matrix

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Chip
,
 DARK_THEME
,
 DEFAULT_THEME
,
 
PlatformBlocksThemeProvider
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
type
 
{
 
ChipProps
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
VARIANTS
:
 
NonNullable
<ChipProps
[
'variant'
]
>
[
]
 
=
 
[
  
'filled'
,
  
'outline'
,
  
'light'
,
  
'subtle'
,
  
'gradient'
,
]
 
// Core palette colors plus one raw custom color, to prove the resolver works for both.
const
 
ROWS
:
 
{
 color
:
 
string
;
 label
:
 
string
 
}
[
]
 
=
 
[
  
{
 color
:
 
'primary'
,
 label
:
 
'Primary'
 
}
,
  
{
 color
:
 
'secondary'
,
 label
:
 
'Secondary'
 
}
,
  
{
 color
:
 
'success'
,
 label
:
 
'Success'
 
}
,
  
{
 color
:
 
'warning'
,
 label
:
 
'Warning'
 
}
,
  
{
 color
:
 
'error'
,
 label
:
 
'Error'
 
}
,
  
{
 color
:
 
'gray'
,
 label
:
 
'Gray'
 
}
,
  
{
 color
:
 
'#7C3AED'
,
 label
:
 
'Custom'
 
}
,
]
 
const
 LABEL_W 
=
 
78
const
 CELL_W 
=
 
104
 
// A single chip with a leading status dot. The dot defaults to the chip's own
// resolved text color, so the indicator stays legible across every variant +
// scheme without any per-cell color plumbing.
function
 
ChipCell
(
{
 variant
,
 color
,
 label 
}
:
 
{
 variant
:
 
NonNullable
<ChipProps
[
'variant'
]
>
;
 color
:
 
string
;
 label
:
 
string
 
}
)
 
{
  
return
 
(
    
<Row
 
justify
=
"center"
 
style
=
{
{
 width
:
 CELL_W 
}
}
>
      
<Chip
 
variant
=
{
variant
}
 
color
=
{
color
}
 
size
=
"sm"
 dot
>
        
{
label
}
      
</Chip
>
    
</Row
>
  
)
}
 
function
 
Matrix
(
)
 
{
  
return
 
(
    
<Block
 
fullWidth
=
{
false
}
>
      
{
/* Column headers */
}
      
<Row
 
gap
=
"xs"
 
align
=
"center"
>
        
<Text
 
style
=
{
{
 width
:
 LABEL_W 
}
}
>
 
</Text
>
        
{
VARIANTS
.
map
(
(
v
)
 
=>
 
(
          
<Text
            
key
=
{
v
}
            
size
=
"xs"
            
color
=
"muted"
            
align
=
"center"
            
style
=
{
{
 width
:
 CELL_W 
}
}
          
>
            
{
v
}
          
</Text
>
        
)
)
}
      
</Row
>
 
      
{
ROWS
.
map
(
(
{
 color
,
 label 
}
)
 
=>
 
(
        
<Row
 
key
=
{
color
}
 
gap
=
"xs"
 
align
=
"center"
>
          
<Text
 
size
=
"xs"
 
color
=
"muted"
 
style
=
{
{
 width
:
 LABEL_W 
}
}
>
            
{
label
}
          
</Text
>
          
{
VARIANTS
.
map
(
(
v
)
 
=>
 
(
            
<ChipCell
 
key
=
{
v
}
 
variant
=
{
v
}
 
color
=
{
color
}
 
label
=
{
label
}
 
/>
          
)
)
}
        
</Row
>
      
)
)
}
    
</Block
>
  
)
}
 
function
 
Panel
(
{
  theme
,
  title
,
  surface
,
}
:
 
{
  theme
:
 typeof DEFAULT_THEME
  title
:
 
string
  surface
:
 
string
}
)
 
{
  
return
 
(
    
<PlatformBlocksThemeProvider
 
theme
=
{
theme
}
 
inherit
=
{
false
}
>
      
<Card
        withBorder
        
padding
=
"lg"
        
radius
=
"lg"
        
style
=
{
{
 flexGrow
:
 
1
,
 flexShrink
:
 
1
,
 flexBasis
:
 
380
,
 minWidth
:
 
300
 
}
}
      
>
        
<Block
 fullWidth
>
          
<Row
 
justify
=
"space-between"
 
align
=
"baseline"
>
            
<Text
 
weight
=
"600"
>
{
title
}
</Text
>
            
<Text
 
size
=
"xs"
 
color
=
"muted"
>
              
{
surface
}
            
</Text
>
          
</Row
>
          
<Matrix
 
/>
        
</Block
>
      
</Card
>
    
</PlatformBlocksThemeProvider
>
  
)
}
 
export
 
function
 
Demo
(
)
 
{
  
// Two panels, each locked to a scheme, so every variant can be read side by side
  
// on the real light and dark surfaces. Text is resolved by measured contrast, so
  
// every variant stays legible on both.
  
return
 
(
    
<Row
 
gap
=
"md"
 
wrap
=
"wrap"
 
align
=
"stretch"
>
      
<Panel
 
theme
=
{
DEFAULT_THEME
}
 
title
=
"Light surface"
 
surface
=
"#FFFFFF"
 
/>
      
<Panel
 
theme
=
{
DARK_THEME
}
 
title
=
"Dark surface"
 
surface
=
"#1C1C1E"
 
/>
    
</Row
>
  
)
}

Scan to open this page on your phonereact-ui-library.com/components/Chip

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap