Chip

shadow

The Chip component is a universal element that is a small visual block containing various other elements such as avatars, text and icons. It offers options to customize colors, states and more.

Basic use

The sample shows the chip in its simplest form as a short label or filter without any other extras.

Inserting other elements

It is also possible to display other elements in the chip element, for example avatar, label, and icon elements. Put leading content in slot="start", keep the main text in the default slot, and put trailing content in slot="end". This markup keeps icons, avatars, long text, and the remove button in a stable row without overlap.

Styling

Color variants

The preview compares chip color variations to make it easier to select the appropriate style for labels, filters, or states.

Styling with CSS custom properties

The demo focuses on modifying the appearance of the chip via CSS variables instead of changing the markup or API.

When to use

Use wje-chip to display content that improves the readability, scannability, or context of the information.

When not to use

Do not use it as a substitute for structured data where precise interaction is needed.

Accessibility

Add alternative text for images, legible contrasts and text equivalents for icons without description.

Recommended practices

• Compress media and use lazy loading for large lists.
• Keep information priorities consistent for tabs and lists.
• Do not repeat the same information in text and icon at the same time with no added value.

Attributes and properties

disabled

Popis	Vypína používateľskú interakciu s komponentom.
Atribút	disabled
Typ	boolean
Predvolené	false

label

Popis	Nastavuje zobrazený alebo prístupný textový štítok.
Atribút	label
Typ	any
Predvolené	-

removable

Popis	Určuje, či je voľba removable zapnutá a ovplyvňuje správanie komponentu.
Atribút	removable
Typ	boolean
Predvolené	false

round

Popis	Určuje, či je voľba round zapnutá a ovplyvňuje správanie komponentu.
Atribút	round
Typ	boolean
Predvolené	false

size

Popis	Nastavuje veľkosť komponentu.
Atribút	size
Typ	string
Predvolené	-

Events

Názov	Popis
wje-chip:remove	Vyvolá sa pri odoslaní udalosti wje-chip:remove.

Methods

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS custom variables

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Slots

Názov	Popis
start	Slot pre obsah zobrazený pred hlavným obsahom.
default	Predvolený slot pre hlavný obsah komponentu.
end	Slot pre obsah zobrazený za hlavným obsahom.