Chip

Guidelines React

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

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" | "navy" | "purple" | "gray" | "success" | "warning" | "error".

Variant

The Chip component has two variants: "filled" by default, and "outlined".

Leading Element

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

Props

Visit the Documentation Site for the full list of props.

Chip

Name	Type	Default	Description
children	ReactNode	-	The chip content or label.
className	string	-	CSS class names to apply custom styling.
color	"blue" | "cream" | "pink" | "lightOrange" | "orange" | "darkGreen" | "navy" | "purple" | "gray" | "success" | "warning" | "error"	false	The color of the chip.
id	string	-	The unique identifier for the DOM element.
role	AriaRole	-	The ARIA role assigned to the element to improve accessibility. Example roles include "button", "navigation", "dialog", etc.
style	CSSProperties	-	Inline styles specified as a React-compatible CSS properties object.
variant	"filled" | "outlined"	filled	Variant for the chip.