• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Buttons / API / ChipProps / 

ChipProps

Represents the properties of Chip component.

NameTypeDefaultDescription

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.

ariaLabel?

string

Represents the label of the Chip component.

avatar?

ChipAvatarProps

Determines if the Chip has an avatar.

children?

React.ReactNode

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

className?

string

Sets additional classes to the Chip.

dataItem?

any

Represents the item data, coming from the ChipList component.

dir?

string

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

disabled?

boolean

Determines if the Chip is disabled.

fillMode?

"null" | "solid" | "outline"

solid

Configures the fillMode of the Chip.

The available options are:

  • solid
  • outline
  • null—Does not set a fillMode className.

icon?

string

Determines if the Chip has a font icon.

id?

string

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

onBlur?

(event: ChipFocusEvent) => void

Triggered on onBlur event.

onClick?

(event: ChipMouseEvent) => void

Triggered on onClick event.

onDoubleClick?

(event: ChipMouseEvent) => void

Triggered on onDoubleClick event.

onFocus?

(event: ChipFocusEvent) => void

Triggered on onFocus event.

onKeyDown?

(event: ChipKeyboardEvent) => void

Triggered on onKeyDown event.

onMouseDown?

(event: ChipMouseEvent) => void

Triggered on onMouseDown event.

onMouseEnter?

(event: ChipMouseEvent) => void

Triggered on onMouseEnter event.

onMouseLeave?

(event: ChipMouseEvent) => void

Triggered on onMouseLeave event.

onMouseMove?

(event: ChipMouseEvent) => void

Triggered on onMouseMove event.

onMouseOut?

(event: ChipMouseEvent) => void

Triggered on onMouseOut event.

onMouseOver?

(event: ChipMouseEvent) => void

Triggered on onMouseOver event.

onMouseUp?

(event: ChipMouseEvent) => void

Triggered on onMouseUp event.

onRemove?

(event: ChipRemoveEvent) => void

Triggered on Chip removing.

removable?

boolean

Determines if the Chip could be removed.

removeIcon?

string

Determines if the Chip has custom font removeIcon.

removeSvgIcon?

SVGIcon

Determines if the Chip has custom SVG removeIcon.

rounded?

"null" | "small" | "large" | "medium" | "full"

medium

Configures the roundness of the Chip.

The available options are:

  • small
  • medium
  • large
  • full
  • null—Does not set a rounded className.

selected?

boolean

Determines if the Chip is selected.

selectedIcon?

string

Determines if the Chip has custom selection font icon.

selectedSvgIcon?

SVGIcon

Determines if the Chip has custom selection SVG icon.

size?

"null" | "small" | "large" | "medium"

medium

Configures the size of the Chip.

The available options are:

  • small
  • medium
  • large
  • null—Does not set a size className.

style?

React.CSSProperties

Sets additional CSS styles to the Chip.

svgIcon?

SVGIcon

Determines if the Chip has an SVG icon.

tabIndex?

number

Sets the tabIndex attribute.

text?

string

Sets the label text of the Chip.

themeColor?

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

base

Configures the themeColor of the Chip.

The available options are:

  • base
  • info
  • success
  • warning
  • error
  • null—Does not set a themeColor className.

value?

any

Sets the id value of the Chip.

In this article

Not finding the help you need?

Contact Support