• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
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

NameTypeDefaultDescription

avatarClass

string

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

disabled

boolean

false

If set to true, the Chip will be disabled.

fillMode

ChipFillMode

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

The possible values are:

  • solid (default)
  • outline
  • none

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

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 font icon class that will be rendered when the Chip is removable. see example

removeSvgIcon

SVGIcon

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

rounded

ChipRounded

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

The possible values are:

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

selected

boolean

false

Specifies the selected state of the Chip.

size

ChipSize

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

The possible values are:

  • small
  • medium (default)
  • large
  • none

svgIcon

SVGIcon

Defines an SVGIcon icon to be rendered inside the Chip using a KendoSVGIcon component.

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

NameTypeDescription

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.

In this article

Not finding the help you need?