Skip to main content

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.

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.

  • 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​

PopisVypína používateľskú interakciu s komponentom.
Atribútdisabled
Typboolean
Predvolenéfalse

label​

PopisNastavuje zobrazený alebo prístupný textový štítok.
Atribútlabel
Typany
Predvolené-

removable​

PopisUrčuje, či je voľba removable zapnutá a ovplyvňuje správanie komponentu.
Atribútremovable
Typboolean
Predvolenéfalse

round​

PopisUrčuje, či je voľba round zapnutá a ovplyvňuje správanie komponentu.
Atribútround
Typboolean
Predvolenéfalse

size​

PopisNastavuje veľkosť komponentu.
Atribútsize
Typstring
Predvolené-

Events​

NázovPopis
wje-chip:removeVyvolá sa pri odoslaní udalosti wje-chip:remove.

Methods​

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

CSS shadow parts​

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

CSS custom variables​

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

Slots​

NázovPopis
defaultPredvolený slot pre hlavný obsah komponentu.

Content