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.

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
testID string - Test ID for testing purposes
accessibilityLabel string label Accessibility label for screen readers

Variants

Solid vs Outline

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

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

Sizes

Three size options for different contexts.

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

Colors

Semantic colors communicate status or category.

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

Examples

Status Indicators

Common pattern for displaying entity status.

Icon Only

Compact icon-only chips for tight spaces.

<Chip icon={<Star size={16} color={colors.foregroundInteractiveWhite} />} color="primary" />
<Chip icon={<Check size={16} color={colors.foregroundSystemSuccess} />} color="success" />
<Chip icon={<AlertCircle size={16} color={colors.foregroundSystemWarning} />} color="warning" />
<Chip icon={<Star size={16} color={colors.foregroundInteractivePrimary} />} color="primary" variant="outline" />

Outline Variants

Subtle styling for secondary information.

Accessibility

  • 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)
  • Add custom accessibilityLabel if the default label is not descriptive or semantic
  • Icon color and other styling props (SVG size) should be adjusted manually, match icon color to chip's label for consistency