New to KendoReact? Start a free 30-day trial

ChipProps

Interface

Represents the properties of Chip component.

Definition

Package:@progress/kendo-react-buttons

Properties

ariaDescribedBy?

string

Identifies the element(s) which describe the component, similar to an HTML aria-describedby attribute. For example, these elements could contain an error or a hint message.

Example:

jsx

<Chip ariaDescribedBy="description" />

ariaLabel?

string

Represents the label of the Chip component.

Example:

jsx

<Chip ariaLabel="Chip Label" />

ariaSelected?

boolean

Sets the aria-selected attribute on the Chip. When provided, overrides the internally computed selected state for the ARIA attribute. Only applies when role is "option".

avatar?

ChipAvatarProps

Determines if the Chip has an avatar.

Example:

jsx

<Chip avatar={{ image: 'avatar.png', imageAlt: 'Avatar' }} />

children?

ReactNode

The React elements that will be rendered as custom content inside the Chip.

Example:

jsx

<Chip>Custom Content</Chip>

className?

string

Sets additional classes to the Chip.

Example:

jsx

<Chip className="custom-chip" />

dataItem?

any

Represents the item data, coming from the ChipList component.

Example:

jsx

<Chip dataItem={{ text: 'Chip1' }} />

dir?

string

The Chip direction 'ltr' as default or 'rtl'.

Example:

jsx

<Chip dir="rtl" />

disabled?

boolean

Determines if the Chip is disabled.

Example:

jsx

<Chip disabled />

fillMode?

"solid" | "outline"

Configures the fillMode of the Chip. The available options are:

solid
outline

Default:

undefined (theme-controlled)

Example:

jsx

<Chip fillMode="outline" />

icon?

string

Determines if the Chip has a font icon.

Example:

jsx

<Chip icon="k-i-user" />

id?

string

Sets the id property of the top div element of the Chip.

Example:

jsx

<Chip id="chip1" />

onBlur?

(event: ChipFocusEvent) => void

Fires on onBlur event.

Parameters:eventChipFocusEvent

Example:

jsx

<Chip onBlur={(event) => console.log(event)} />

onClick?

(event: ChipMouseEvent) => void

Fires on onClick event.

Parameters:eventChipMouseEvent

Example:

jsx

<Chip onClick={(event) => console.log(event)} />

onDoubleClick?

(event: ChipMouseEvent) => void

Fires on onDoubleClick event.

Parameters:eventChipMouseEvent

Example:

jsx

<Chip onDoubleClick={(event) => console.log(event)} />

onFocus?

(event: ChipFocusEvent) => void

Fires on onFocus event.

Parameters:eventChipFocusEvent

Example:

jsx

<Chip onFocus={(event) => console.log(event)} />

onKeyDown?

(event: ChipKeyboardEvent) => void

Fires on onKeyDown event.

Parameters:eventChipKeyboardEvent

Example:

jsx

<Chip onKeyDown={(event) => console.log(event)} />

onMouseDown?

(event: ChipMouseEvent) => void

Fires on onMouseDown event.

Parameters:eventChipMouseEvent

Example:

jsx

<Chip onMouseDown={(event) => console.log(event)} />

onMouseEnter?

(event: ChipMouseEvent) => void

Fires on onMouseEnter event.

Parameters:eventChipMouseEvent

Example:

jsx

<Chip onMouseEnter={(event) => console.log(event)} />

onMouseLeave?

(event: ChipMouseEvent) => void

Fires on onMouseLeave event.

Parameters:eventChipMouseEvent

Example:

jsx

<Chip onMouseLeave={(event) => console.log(event)} />

onMouseMove?

(event: ChipMouseEvent) => void

Fires on onMouseMove event.

Parameters:eventChipMouseEvent

Example:

jsx

<Chip onMouseMove={(event) => console.log(event)} />

onMouseOut?

(event: ChipMouseEvent) => void

Fires on onMouseOut event.

Parameters:eventChipMouseEvent

Example:

jsx

<Chip onMouseOut={(event) => console.log(event)} />

onMouseOver?

(event: ChipMouseEvent) => void

Fires on onMouseOver event.

Parameters:eventChipMouseEvent

Example:

jsx

<Chip onMouseOver={(event) => console.log(event)} />

onMouseUp?

(event: ChipMouseEvent) => void

Fires on onMouseUp event.

Parameters:eventChipMouseEvent

Example:

jsx

<Chip onMouseUp={(event) => console.log(event)} />

onRemove?

(event: ChipRemoveEvent) => void

Fires on Chip removing.

Parameters:eventChipRemoveEvent

Example:

jsx

<Chip onRemove={(event) => console.log(event)} />

removable?

boolean

Determines if the Chip could be removed.

Example:

jsx

<Chip removable />

removeIcon?

string

Determines if the Chip has custom font removeIcon.

Example:

jsx

<Chip removeIcon="k-i-close" />

removeSvgIcon?

SVGIcon

Determines if the Chip has custom SVG removeIcon.

Example:

jsx

import { gearIcon } from '@progress/kendo-svg-icons';

<Chip removeSvgIcon={gearIcon} />

rounded?

"small" | "medium" | "large" | "full" | "none"

Configures the roundness of the Chip. The available options are:

small
medium
large
full
none

Default:

undefined (theme-controlled)

Example:

jsx

<Chip rounded="full" />

selected?

boolean

Determines if the Chip is selected.

Example:

jsx

<Chip selected />

selectedIcon?

string

Determines if the Chip has custom selection font icon.

Example:

jsx

<Chip selectedIcon="k-i-check" />

selectedSvgIcon?

SVGIcon

Determines if the Chip has custom selection SVG icon.

Example:

jsx

import { gearIcon } from '@progress/kendo-svg-icons';

<Chip selectedSvgIcon={gearIcon} />

size?

"small" | "medium" | "large"

Configures the size of the Chip. The available options are:

small
medium
large

Default:

undefined (theme-controlled)

Example:

jsx

<Chip size="large" />

style?

CSSProperties

Sets additional CSS styles to the Chip.

Example:

jsx

<Chip style={{ margin: '10px' }} />

svgIcon?

SVGIcon

Determines if the Chip has an SVG icon.

Example:

jsx

import { gearIcon } from '@progress/kendo-svg-icons';

<Chip svgIcon={gearIcon} />

tabIndex?

number

Sets the tabIndex attribute.

Example:

jsx

<Chip tabIndex={0} />

text?

string

Sets the label text of the Chip.

Example:

jsx

<Chip text="Label" />

themeColor?

"base" | "info" | "success" | "warning" | "error"

Configures the themeColor of the Chip. The available options are:

base
info
success
warning
error

Default:

undefined (theme-controlled)

Example:

jsx

<Chip themeColor="success" />

value?

any

Sets the id value of the Chip.

Example:

jsx

<Chip value="chip1" />