DEV Community

loading...
Cover image for React Chip

React Chip

primetek profile image PrimeTek ・1 min read

React Chip represents entities using icons, labels and images.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Chip } from 'primereact/chip';
Enter fullscreen mode Exit fullscreen mode

Getting Started

Chip can display labels, icons and images.

<Chip label="Text Only" />
<Chip label="Text with icon" icon="pi pi-check" />
<Chip label="Text with image" image="user.png" />
Enter fullscreen mode Exit fullscreen mode

Removable

Setting removable property displays an icon to close the chip, the optional onRemove event is available to get notified when a chip is hidden.

<Chip label="Text" removable />
Enter fullscreen mode Exit fullscreen mode

Templating

Content can easily be customized with the template property instead of using the built-in modes.

<Chip template="Content" />
<Chip template={<span>Content<span>} />
<Chip template={(props) => <span>Content<span>} />
Enter fullscreen mode Exit fullscreen mode

Theming

Chip supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Chip showcase for demos and documentation.

Discussion (0)

Forem Open with the Forem app