OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Chip

Displays a stylized element that represents a value or a related action.

Chip

 <Chip>Chip</Chip>

API Reference

Prop	Type	Default
`color`	`"blue" \| "gray"`	`"blue"`
`weight`	`"normal" \| "bold"`	`"normal"`
`onRemove`	`function`

This component is based on the span element and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

Colors

Use the color prop to control the color of the chip.

BlueGray

 <Flex align="center" gap="2">
  <Chip color="blue">Blue</Chip>
  <Chip color="gray">Gray</Chip>
</Flex>

With icons

You may nest icons directly inside the chips. The correct gap between the icon and the text is provided automatically.

External domainsExternal domains

 <Flex align="center" gap="2">
  <Chip color="blue">
    <CheckIcon width="14" height="14" />
    External domains
  </Chip>

  <Chip color="gray">
    <CheckIcon width="14" height="14" />
    External domains
  </Chip>
</Flex>

Weights

Use the weight prop to set the weight of the chip. Normally, you should use bold weight for chips that represent unique values, and regular weight for related actions.

foo-corp.comfoo-corp.co.uk3 more

 <Flex align="center" gap="1">
  <Chip color="blue" weight="bold">
    foo-corp.com
  </Chip>
  <Chip color="blue" weight="bold">
    foo-corp.co.uk
  </Chip>
  <Chip color="blue">3 more</Chip>
</Flex>

With remove button

If you pass a onRemove function, a small button will be rendered on the right side of the chip.

workos.comfoo-corp.com

 <Flex align="center" gap="2">
  <Chip color="blue" onRemove={() => null}>
    workos.com
  </Chip>

  <Chip color="gray" onRemove={() => null}>
    foo-corp.com
  </Chip>
</Flex>

With Code component

You can compose Chip together with the Code component.

org_01GFM89469M29NMAEH52JPV2SQ

 <Chip color="gray">
  <Code variant="ghost">org_01GFM89469M29NMAEH52JPV2SQ</Code>
</Chip>

As button

Use the as prop to render the chip as a button. This prop adds styles for the interactive states, like hover and focus.

 <Flex align="center" gap="2">
  <Chip color="blue" as="button">
    <PlusIcon width="12" height="12" /> Add organization admin
  </Chip>

  <Chip color="gray" as="button">
    <PlusIcon width="12" height="12" /> Add organization admin
  </Chip>

  <Chip color="gray" as="button" aria-label="More options">
    <DotsHorizontalIcon width="14" height="14" />
  </Chip>
</Flex>