Taiga UI 5.0 is out!

Chip KIT

Examples API GitHub

On this page

Chip component is used to display array data and can also be interactive depending on the tag used.

Basic

Default appearance is Neutral Primary Accent Positive Negative Warning Info Outline Floating

Sizes and content

Text Text Text Text
Single icon Single icon Single icon Single icon
Duo icon Duo icon Duo icon Duo icon
Avatar Image Avatar Image Image Image
Avatar
Avatar Avatar Avatar
Button Button Button Button
Badge
1
Badge
1
Badge
1
Badge

Interactive

Checkbox

Radio

Label outline

Label accent

Button

Close button 1 Close button 2 Close button 3

Input

test Some text WOW!

Use cases

Very long value in chip
₽123 000
Very long value in chip
 Notifications
Customized chip Toggle chip

Auto color

Free Base Pro Enterprise Premium Ultimate Starter Advanced Business Enterprise Personal Standard Essential Professional Deluxe Gold Silver Bronze Plus Basic

Fade in complex designs

If there are two labels with tuiFade inside the chip, the right label takes precedence by default. This means that the left label goes into fade. But if the width of the left label is less than 30% of the whole chip, then the right part of the chip will be faded in

Supermarkets
$9 000
AI
$9 870 043 000
Long category name

Use CSS to set a custom priority for the fade:

Miscellaneous goods
$105 000
GitHub StackBlitz