Version: 3.5.13

Chip

Chips are compact elements that represent an input, attribute, or action. They are commonly used for tags, filters, and selections.

Overview

Chips are small, interactive elements that represent discrete pieces of information or actions. They provide a compact way to display tags, filters, selections, and other categorical information.

All chip styles are built using design tokens, ensuring consistency across themes and hues. Use the interactive playground below to explore all available combinations.

Interactive Playground

Use the controls to customize the chip and see how it looks in real-time. Toggle between themes and hues to see how chips adapt to different contexts.

Color
Show Borders
Show Icon
Identifier
<Chip />
Anatomy

A chip consists of a rounded container with optional icon and text label. The container uses tonal background colors and can optionally display borders.

Identifier
ContainerRounded pill shape, border-radius: full
IconOptional ListDetailsIcon (16px/20px/24px based on size)
LabelText content
Variants & States

Chips come in different colors, sizes, and configurations to fit various use cases.

Primary

Default color variant using primary tonal background and primary-on-tonal foreground.

Identifier
Neutral

Neutral variant using page-tertiary background and neutral-tertiary foreground.

Identifier
Success

Success variant for positive states and confirmations.

Identifier
Critical

Critical variant for errors and important warnings.

Identifier
Warning

Warning variant for cautionary states.

Identifier
With Borders

Chips can display borders for added visual definition.

Identifier
With Icon

Chips can include an optional icon before the label text.

Identifier
Small

Compact size (16px icon) for dense interfaces or when space is limited.

Identifier
Medium

Default size (20px icon) suitable for most use cases.

Identifier
Large

Larger size (24px icon) for improved visibility and accessibility.

Identifier
Usage Guidelines
Do
  • Use chips to represent tags, filters, or selections.
  • Use chips for compact categorical information.
  • Choose appropriate color variants based on semantic meaning.
  • Use icons when they add meaningful context.
  • Keep chip labels concise and descriptive.
  • Use borders when additional visual definition is needed.
Don't
  • Don't use chips for primary actions (use buttons instead).
  • Don't use chips for long text content.
  • Don't mix too many color variants in a single group.
  • Don't use chips without clear purpose or context.
  • Don't overcrowd interfaces with too many chips.
  • Don't use icons that don't add meaningful information.
Accessibility
  • Ensure sufficient color contrast between chip background and text colors.
  • Provide clear visual feedback for interactive chip states.
  • Use semantic HTML and ARIA attributes when chips are interactive.
  • Ensure chips are large enough to be easily clickable (minimum touch target size).
  • Provide alternative text or labels for icon-only chips.
  • Consider keyboard navigation for chip groups.
API Reference

Chip component props and types.

ChipProps
interface ChipProps { label?: string; color?: "primary" | "neutral" | "success" | "critical" | "warning"; size?: "sm" | "md" | "lg"; showBorders?: boolean; showIcon?: boolean; onClick?: () => void; }
Props
label
string
"Identifier"
Text content displayed in the chip.
color
"primary" | "neutral" | "success" | "critical" | "warning"
"primary"
Color variant of the chip. Determines background and text colors.
size
"sm" | "md" | "lg"
"md"
Chip size: sm (16px icon), md (20px icon), lg (24px icon).
showBorders
boolean
false
Whether to display a border around the chip.
showIcon
boolean
false
Whether to display an icon before the label text.
onClick
() => void
—
Callback function called when chip is clicked (if chip is interactive).
Usage Examples

Copyable code snippets for common chip use cases.

Basic Chip
Identifier
import { Chip } from 'beacon-ui'; <Chip />
Chip with Label
Tag
import { Chip } from 'beacon-ui'; <Chip label="Tag" />
Chip with Icon
Filter
import { Chip } from 'beacon-ui'; import { ListDetailsIcon } from 'beacon-icons'; <Chip label="Filter" icon={<ListDetailsIcon size="xs" />} />
Chip with Border
Selected
import { Chip } from 'beacon-ui'; <Chip label="Selected" showBorders />
Color Variants
Success
Warning
Error
Neutral
import { Chip } from 'beacon-ui'; <Chip label="Success" color="success" /> <Chip label="Warning" color="warning" /> <Chip label="Error" color="critical" /> <Chip label="Neutral" color="neutral" />
Chip Group
Tag 1
Tag 2
Tag 3
import { Chip } from 'beacon-ui'; <div style={{ display: "flex", gap: "var(--spacing-200)", flexWrap: "wrap" }}> <Chip label="Tag 1" /> <Chip label="Tag 2" color="success" /> <Chip label="Tag 3" color="warning" /> </div>