Chip Component

The Chip component is a versatile element for representing information in a compact form, such as text, entity attributes, selections, filters, or actions, enhancing content presentation based on its configuration and state.

Usage

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

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

export default function App() {
    <Chip color="Primary" removable={true}>Anne</Chip>
}

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

export default function App() {
    <Chip color="Primary" removable={true}>Anne</Chip>
}

Demos

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

Props

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.
removeIcon	node	-	Specifies the icon element to render for the chip's remove action. When provided, replaces the default close/remove icon.
selectIcon	node	-	Specifies the icon element to indicate the chip’s selected state. When provided, replaces the default selection indicator.
size	Size	Size.Medium	Specifies the size of the Chip. Options include 'Small', 'Medium' and 'Large'.
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'.

Events

The following table outlines the events for the Chip component:

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

Chip Component

Usage

Demos

Props

Events

Enhance your React apps with Syncfusion components today