Customization
The Chip component provides options for customizing its look and feel.
When customizing the rendering of the Chip, you can:
Rendering Custom Remove Icons
To specify a custom Remove icon, use the removeIcon property.
Displaying Avatars
To provide visual recognition and improve the end user interactions with your app, you can show an avatar in your Chip components. You can choose between rendering an image from a specified location or displaying predefined initials. To render an avatar inside a Chip, use the built-in avatarSettings property.
The avatarSettings property accepts an object of type ChipAvatarSettings, which provides the following configuration options:
cssStyle—Sets the CSS styles applied to the wrapper element of the Chip avatar.imageAltText—Sets thealtattribute of the Chip avatar image.imageCssStyle—Sets the CSS styles applied to the Chip avatar image.imageSrc—Sets the Chip avatar image.initials—Sets the Chip avatar initials.initialsCssStyle—Sets the CSS styles applied to the wrapper element of the Chip avatar initials.
Starting with
v17.0.0, theavatarClassproperty is no longer available and is replaced with theavatarSettingsoption. For earlier versions, you can still use theavatarClassproperty to render avatar icons in the Chip.
Displaying Images Avatars in the Chip
To render an image as the Chip avatar, set the imageSrc property of the ChipAvatarSettings. You can also provide the alt attribute of the image by using the imageAltText property and set some custom styling to it by utilizing the imageCssStyle option.
The following example demonstrates how to display an image avatar in the Chip.
Displaying Avatar Initials the Chip
You can display initials in the avatar section of the Chip by using the initials option of the ChipAvatarSettings. To further customize the way the initials are rendered in the Chip, provide the desired styling to the initialsCssStyle property.
The following example demonstrates how to display avatar initials in the Chip.