Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UIupdated
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBoxnew
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridbeta
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    Styling & Themes
    Common Features
    Project Setup
New to Kendo UI for Angular? Start a free 30-day trial

ChipComponent

Displays a Chip that represents an input, attribute or an action.

Selector

kendo-chip

Inputs

avatarClass

string

The avatarClass allows the usage of avatar icons rendered in the Chip.

disabled

boolean

(default: false) If set to true, the Chip will be disabled.

icon

string

Defines the name for an existing icon in a Kendo UI theme. The icon is rendered inside the Chip by a span.k-icon element.

iconClass

string

Defines a CSS class — or multiple classes separated by spaces — which are applied to a span element. Allows the usage of custom icons.

label

string

Sets the label text of the Chip.

removable

boolean

(default: false) Specifies if the Chip will be removable or not. If the property is set to true, the Chip renders a remove icon.

removeIcon

string

Specifies a custom remove icon that will be rendered when the Chip is removable. see example

selected

boolean

(default: false) Specifies the selected state of the Chip.

fillMode

ChipFillMode

The fillMode property specifies the background and border styles of the Chip (see example).

The possible values are:

  • solid (default)
  • outline
  • none

rounded

ChipRounded

The rounded property specifies the border radius of the Chip (see example).

The possible values are:

  • small
  • medium (default)
  • large
  • full
  • none

size

ChipSize

The size property specifies the padding of the Chip (see example).

The possible values are:

  • small
  • medium (default)
  • large
  • none

themeColor

ChipThemeColor

The Chip allows you to specify predefined theme colors. The theme color will be applied as a background and border color while also amending the text color accordingly (see example).

The possible values are:

  • base (default)
  • info
  • success
  • warning
  • error
  • none

Events

contentClick

EventEmitter<ChipContentClickEvent>

Fires each time the user clicks the content of the Chip.

remove

EventEmitter<ChipRemoveEvent>

Fires each time the user clicks the remove icon of the Chip.

Methods

blur

Blurs the Chip component.

focus

Focuses the Chip component.