Atom

Chip

Compact element for displaying status, categories, tags, or attributes.

Overview

The Chip component is a presentational element used to display compact pieces of information such as status indicators, categories, tags, or attribute labels. Unlike buttons, chips are non-interactive and serve a display-only purpose.

Default Active Pending Error

Props

Prop Type Default Description
label string - Text content displayed in the chip
variant 'solid' | 'outline' 'solid' Visual style variant
size 'sm' | 'md' | 'lg' 'md' Size variant
color 'default' | 'primary' | 'primary-alt' | 'success' | 'warning' | 'danger' 'default' Color variant for semantic meaning
iconStart ReactNode - Icon displayed before the label
iconEnd ReactNode - Icon displayed after the label
icon ReactNode - Icon for icon-only mode

Variants

Solid vs Outline

Use solid for primary status and outline for secondary or subtle information.

Solid Outline 
<Chip label="Solid" variant="solid" color="primary" />
<Chip label="Outline" variant="outline" color="primary" />

Sizes

Three size options for different contexts.

Small Medium Large 
<Chip label="Small" size="sm" />
<Chip label="Medium" size="md" />
<Chip label="Large" size="lg" />

Colors

Semantic colors communicate status or category.

Default Primary Success Warning Danger 
<Chip label="Default" color="default" />
<Chip label="Primary" color="primary" />
<Chip label="Success" color="success" />
<Chip label="Warning" color="warning" />
<Chip label="Danger" color="danger" />

Examples

Status Indicators

Common pattern for displaying entity status.

Active Pending Inactive Draft

Outline Variants

Subtle styling for secondary information.

Tag Category Archived

Accessibility

  • Role: Chips have a "status" role, communicating that they display information.
  • Non-Interactive: Chips are not focusable as they are presentational only.
  • Screen Reader: Announces the label text and conveys semantic meaning through color.
  • WCAG Compliance: Meets AA standards for color contrast.

Best Practices

  • Use chips for displaying information, not for triggering actions (use Button instead)
  • Choose semantic colors that match the meaning (success for positive, danger for errors)
  • Keep chip labels concise and descriptive
  • Don't use chips for navigation (use Link or Tab components)