Dojo NG is being built in the open, one section at a time — follow along on Heptapod.

API REFERENCE · DATA DISPLAY

<dj-chip>

Compact label/tag. Label in the default slot, optional icon in the icon slot. clickable wraps the body in a real <button> (native Enter/Space; the click bubbles from the host); closeable shows a separate close <button> that emits dj-close. The two are siblings, never nested, so a clickable + closeable chip stays valid ARIA. Parts: root, action, close.

Try it in the playground

@dojo-ng/chip · v0.1.1

npm install @dojo-ng/chip

import "@dojo-ng/chip";

Properties

PropertyAttributeTypeDefault
disabled disabled reflected boolean false
checked checked reflected boolean false
clickable clickable boolean false
closeable closeable boolean false
closeLabelAccessible name for the close button (defaults to "Remove"); set it to name what is being removed. close-label string None

Events

dj-close

Slots

iconDefault slot

CSS parts

Style these with dj-chip::part(name).

rootactionclose