Chip Component

The Chip component represents information in a compact form, such as entity attribute, text, or action.

Usage

To import and use the Chip component in your application, use the following code snippet:

import { Chip } from "@syncfusion/react-buttons";

<Chip color="Primary" removable={true}>Anne</Chip>

import { Chip } from "@syncfusion/react-buttons";

<Chip color="Primary" removable={true}>Anne</Chip>

Explore the demos of the React Chip component. Refer to this page.

The following table outlines the props for the Chip component:

Name	Type	Default	Description
avatar	node	-	Specifies the icon CSS class or React node for the avatar in the Chip.
color	ChipColor	-	Specifies the color of the Chip, one of 'Primary', 'Info', 'Error', 'Success', or 'Warning'.
disabled	boolean	false	Specifies whether the Chip component is disabled or not.
leadingIcon	node	-	Specifies the leading icon CSS class or React node for the Chip.
leadingIconUrl	string	-	Specifies the leading icon url for the Chip.
removable	boolean	false	Specifies whether the Chip is removable.
text	string	-	Specifies the text content for the Chip.
trailingIcon	node	-	Specifies the trailing icon CSS or React node for the Chip.
trailingIconUrl	string	-	Specifies the trailing icon url for the Chip.
value	string \| number	-	Defines the value of the Chip.
variant	ChipVariant	'filled'	Specifies the variant of the Chip, either 'filled' or 'outlined'.

The following table outlines the events for the Chip component:

Name	Type	Description
onDelete	(event: ChipDeleteEvent) => void	Event handler for the delete action.