ChipProps

Represents the properties of Chip component.

Name	Type	Default	Description
ariaDescribedBy?	string		Identifies the element(s) which will describe the component, similar to an HTML aria-describedby attribute. For example, these elements could contain an error or a hint message. jsx <Chip ariaDescribedBy="description" />
ariaLabel?	string		Represents the label of the Chip component. jsx <Chip ariaLabel="Chip Label" />
avatar?	ChipAvatarProps		Determines if the Chip has an avatar. jsx <Chip avatar={{ image: 'avatar.png', imageAlt: 'Avatar' }} />
children?	React.ReactNode		The React elements that will be rendered as custom content inside the Chip. jsx <Chip>Custom Content</Chip>
className?	string		Sets additional classes to the Chip. jsx <Chip className="custom-chip" />
dataItem?	any		Represents the item data, coming from the ChipList component. jsx <Chip dataItem={{ text: 'Chip1' }} />
dir?	string		The Chip direction 'ltr' as default or 'rtl'. jsx <Chip dir="rtl" />
disabled?	boolean		Determines if the Chip is disabled. jsx <Chip disabled />
fillMode?	"null" | "solid" | "outline"	solid	Configures the fillMode of the Chip. The available options are: solid outline null (removes built-in fill mode styles) jsx <Chip fillMode="outline" />
icon?	string		Determines if the Chip has a font icon. jsx <Chip icon="k-i-user" />
id?	string		Sets the id property of the top div element of the Chip. jsx <Chip id="chip1" />
onBlur?	(event: ChipFocusEvent) => void		Triggered on onBlur event. jsx <Chip onBlur={(event) => console.log(event)} />
onClick?	(event: ChipMouseEvent) => void		Triggered on onClick event. jsx <Chip onClick={(event) => console.log(event)} />
onDoubleClick?	(event: ChipMouseEvent) => void		Triggered on onDoubleClick event. jsx <Chip onDoubleClick={(event) => console.log(event)} />
onFocus?	(event: ChipFocusEvent) => void		Triggered on onFocus event. jsx <Chip onFocus={(event) => console.log(event)} />
onKeyDown?	(event: ChipKeyboardEvent) => void		Triggered on onKeyDown event. jsx <Chip onKeyDown={(event) => console.log(event)} />
onMouseDown?	(event: ChipMouseEvent) => void		Triggered on onMouseDown event. jsx <Chip onMouseDown={(event) => console.log(event)} />
onMouseEnter?	(event: ChipMouseEvent) => void		Triggered on onMouseEnter event. jsx <Chip onMouseEnter={(event) => console.log(event)} />
onMouseLeave?	(event: ChipMouseEvent) => void		Triggered on onMouseLeave event. jsx <Chip onMouseLeave={(event) => console.log(event)} />
onMouseMove?	(event: ChipMouseEvent) => void		Triggered on onMouseMove event. jsx <Chip onMouseMove={(event) => console.log(event)} />
onMouseOut?	(event: ChipMouseEvent) => void		Triggered on onMouseOut event. jsx <Chip onMouseOut={(event) => console.log(event)} />
onMouseOver?	(event: ChipMouseEvent) => void		Triggered on onMouseOver event. jsx <Chip onMouseOver={(event) => console.log(event)} />
onMouseUp?	(event: ChipMouseEvent) => void		Triggered on onMouseUp event. jsx <Chip onMouseUp={(event) => console.log(event)} />
onRemove?	(event: ChipRemoveEvent) => void		Triggered on Chip removing. jsx <Chip onRemove={(event) => console.log(event)} />
removable?	boolean		Determines if the Chip could be removed. jsx <Chip removable />
removeIcon?	string		Determines if the Chip has custom font removeIcon. jsx <Chip removeIcon="k-i-close" />
removeSvgIcon?	SVGIcon		Determines if the Chip has custom SVG removeIcon. jsx import { gearIcon } from '@progress/kendo-svg-icons'; <Chip removeSvgIcon={gearIcon} />
rounded?	"null" | "small" | "large" | "medium" | "full"	medium	Configures the roundness of the Chip. The available options are: small medium large full null (removes built-in roundness styles) jsx <Chip rounded="full" />
selected?	boolean		Determines if the Chip is selected. jsx <Chip selected />
selectedIcon?	string		Determines if the Chip has custom selection font icon. jsx <Chip selectedIcon="k-i-check" />
selectedSvgIcon?	SVGIcon		Determines if the Chip has custom selection SVG icon. jsx import { gearIcon } from '@progress/kendo-svg-icons'; <Chip selectedSvgIcon={gearIcon} />
size?	"null" | "small" | "large" | "medium"	medium	Configures the size of the Chip. The available options are: small medium large null (removes built-in size styles) jsx <Chip size="large" />
style?	React.CSSProperties		Sets additional CSS styles to the Chip. jsx <Chip style={{ margin: '10px' }} />
svgIcon?	SVGIcon		Determines if the Chip has an SVG icon. jsx import { gearIcon } from '@progress/kendo-svg-icons'; <Chip svgIcon={gearIcon} />
tabIndex?	number		Sets the tabIndex attribute. jsx <Chip tabIndex={0} />
text?	string		Sets the label text of the Chip. jsx <Chip text="Label" />
themeColor?	"null" | "base" | "info" | "success" | "warning" | "error"	base	Configures the themeColor of the Chip. The available options are: base info success warning error null (removes built-in theme color styles) jsx <Chip themeColor="success" />
value?	any		Sets the id value of the Chip. jsx <Chip value="chip1" />