Chip

ReactProps

Github Storybook Markdown Copy for LLM

A chip represents a set of keywords that help label, organize, and categorize items.

Import

import { Chip } from "@cfa/react-core";

Live Editor

Guidelines

When to use

• Chip is for text labels that categorize or tag items, especially when the label is too long for Badge.

Do

• Keep labels short and in sentence case.

Avoid

• Using Chip to apply filters. Use TagGroup for active filters.
• Using Chip as a primary action. Use Button or Link for actions.
• Using Chip for numeric counts on icons, buttons, tabs, or navigation. Use Badge.
• Piling up dozens of static chips. Use TagGroup for related sets or a summary representation.
• Wrapping text inside a chip.

Examples

Color

There are several color variations with the Chip component, with blue as the default.

The following options are also available: "cream" | "pink" | "lightOrange" | "orange" | "darkGreen" | "purple" | "gray" | "success" | "warning" | "error".

Variant

The Chip component has two variants: "subtle" by default and "outlined". Each color supports both variants.

Leading Element

The Chip component can have a leading element, such as an icon.