Taiga UI 5.0 is out!
See what's new
Chip KIT
On this page
Chip component is used to display array data and can also be interactive depending on the tag used.
Basic
<span tuiChip>Default appearance is Neutral</span>
<span
appearance="primary"
tuiChip
>
Primary
</span>
<span
appearance="accent"
tuiChip
>
Accent
</span>
<span
appearance="positive"
tuiChip
>
Positive
</span>
<span
appearance="negative"
tuiChip
>
Negative
</span>
<span
appearance="warning"
tuiChip
>
Warning
</span>
<span
appearance="info"
tuiChip
>
Info
</span>
<span
appearance="outline"
tuiChip
>
Outline
</span>
<span
appearance="floating"
tuiChip
>
Floating
</span>
[tuiChip] {
margin: 0.5rem;
}
Sizes and content
Image Image Image Image 1
Badge 1
Badge 1
Badge
<section>
@for (size of sizes; track size) {
<span
tuiChip
[size]="size"
[style.border-radius.rem]="5"
>
Text
</span>
}
</section>
<section>
@for (size of sizes; track size) {
<span
iconStart="@tui.bell"
tuiChip
[size]="size"
>
Single icon
</span>
}
</section>
<section>
@for (size of sizes; track size) {
<span
iconEnd="@tui.circle-help"
iconStart="@tui.bell"
tuiChip
[size]="size"
[style.border-radius.rem]="5"
>
Duo icon
</span>
}
</section>
<section>
@for (size of sizes; track size) {
<span
tuiChip
[size]="size"
>
@if (size === 'm' || size === 's') {
<img
alt="Avatar"
src="assets/images/avatar.jpg"
[style.border-radius.rem]="size === 'm' ? 0.25 : 0.5"
/>
}
Image
</span>
}
</section>
<section>
@for (size of sizes; track size) {
<span
tuiChip
[size]="size"
[style.border-radius.rem]="5"
>
@if (size === 'm' || size === 's') {
<div
tuiAvatar="@tui.user"
[round]="true"
>
<img
alt=""
src="assets/images/avatar.jpg"
/>
</div>
}
Avatar
</span>
}
</section>
<section>
<span
size="m"
tuiChip
>
Button
<button
iconStart="@tui.x"
size="s"
tuiIconButton
type="button"
>
Remove
</button>
</span>
@for (size of sizes | slice: 1; track size) {
<span
tuiChip
[size]="size"
>
Button
<button
iconStart="@tui.x"
tuiIconButton
type="button"
>
Remove
</button>
</span>
}
</section>
<section>
@for (size of sizes; track size) {
<span
tuiChip
[size]="size"
>
Badge
@if (size !== 'xxs') {
<div
appearance="primary"
tuiBadge
[size]="size === 'm' ? 'm' : 's'"
>
1
</div>
}
<button
iconStart="@tui.x"
tuiIconButton
type="button"
>
Remove
</button>
</span>
}
</section>
:host {
display: flex;
flex-direction: column;
gap: 1rem;
}
section {
display: flex;
align-items: center;
gap: 0.5rem;
}
Interactive
Checkbox
Radio
Label outline
Label accent
Button
Input
<h3>Checkbox</h3>
<section>
@for (_ of '-'.repeat(checked.length); track $index) {
<label
appearance=""
tuiChip
>
Checkbox {{ $index + 1 }}
<input
appearance="outline-grayscale"
tuiChip
type="checkbox"
[(ngModel)]="checked[$index]"
/>
</label>
}
</section>
<h3>Radio</h3>
<section>
@for (_ of '-'.repeat(3); track $index) {
<label
appearance=""
tuiChip
>
Radio {{ $index + 1 }}
<input
appearance="outline-grayscale"
name="radio"
tuiChip
type="radio"
[value]="$index"
/>
</label>
}
</section>
<h3>Label outline</h3>
<section>
@for (_ of '-'.repeat(checked.length); track $index) {
<label
appearance="outline-grayscale"
tuiChip
>
<input
tuiCheckbox
type="checkbox"
[(ngModel)]="checked[$index]"
/>
Label {{ $index + 1 }}
</label>
}
</section>
<h3>Label accent</h3>
<section>
@for (_ of '-'.repeat(checked.length); track $index) {
<label
tuiChip
[appearance]="checked[$index] ? 'accent' : 'neutral'"
>
<input
hidden
type="checkbox"
[(ngModel)]="checked[$index]"
/>
Label {{ $index + 1 }}
</label>
}
</section>
<h3>Button</h3>
<section>
@for (_ of '-'.repeat(3); track $index) {
<button
tuiChip
type="button"
(click)="onChip($index)"
>
Button {{ $index + 1 }}
</button>
}
</section>
<section>
@for (_ of '-'.repeat(3); track $index) {
<span tuiChip>
Close button {{ $index + 1 }}
<button
iconStart="@tui.x"
tuiIconButton
type="button"
(click.stop)="onX($index)"
>
Remove
</button>
</span>
}
</section>
<h3>Input</h3>
<section>
@for (_ of '-'.repeat(values.length); track $index) {
<span
appearance=""
tuiChip
[style.color]="'transparent'"
>
{{ values[$index] }}
<input
tuiChip
[(ngModel)]="values[$index]"
/>
</span>
}
</section>
:host {
display: flex;
flex-direction: column;
gap: 1rem;
}
h3 {
margin: 0;
}
section {
display: flex;
align-items: center;
gap: 0.5rem;
}
Use cases
Very long value in chip
₽123 000
Very long value in chip
<span
appearance="primary"
tuiChip
class="fade"
>
<div tuiFade>Very long value in chip</div>
<div>{{ 123000 | tuiAmount: 'RUB' }}</div>
</span>
<span
appearance="accent"
iconStart="@tui.box"
tuiChip
>
<div class="ellipsis">Very long value in chip</div>
</span>
<tui-badged-content>
<tui-badge-notification
size="xs"
tuiSlot="top"
/>
<span
appearance="secondary"
iconStart="@tui.bell"
tuiChip
>
Notifications
</span>
</tui-badged-content>
<span
appearance="custom"
iconEnd="@tui.thumbs-up"
tuiChip
>
Customized chip
</span>
<span
tuiChip
[appearance]="selected ? 'primary' : 'neutral'"
>
Toggle chip
<button
iconStart="@tui.plus"
tuiIconButton
type="button"
class="toggle"
[style.transform]="selected ? 'rotate(45deg)' : 'rotate(0)'"
(click)="selected = !selected"
>
Toggle
</button>
</span>
@import '@taiga-ui/styles/utils.less';
:host {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.fade {
max-inline-size: 11rem;
}
.ellipsis {
max-inline-size: 7rem;
.text-overflow();
}
[data-appearance='custom'] {
color: #fff;
background-image: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
font-weight: bold;
}
.toggle {
.transition(transform);
color: inherit !important;
}
Auto color
@for (chip of chips; track chip) {
<span
appearance="custom"
tuiChip
[style.background-color]="chip | tuiAutoColor"
>
{{ chip }}
</span>
}
[tuiChip] {
margin: 0.5rem;
}
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
<span
appearance="accent"
iconStart="@tui.shopping-cart"
tuiChip
>
<div tuiFade>Supermarkets</div>
<div tuiFade>{{ 9000 | tuiAmount: 'USD' }}</div>
</span>
<span
appearance="accent"
tuiChip
>
<span tuiAvatar="@tui.user">
<img
alt=""
src="assets/images/avatar.jpg"
/>
</span>
<div tuiFade>AI</div>
<div tuiFade>{{ 9870043000 | tuiAmount: 'USD' }}</div>
</span>
<span
appearance="accent"
iconEnd="@tui.shower-head"
tuiChip
>
<div tuiFade>Long category name</div>
</span>
<p>Use CSS to set a custom priority for the fade:</p>
<span
appearance="primary"
tuiChip
class="custom"
>
<div tuiFade>Miscellaneous goods</div>
<div tuiFade>{{ 105000 | tuiAmount: 'USD' }}</div>
</span>
[tuiChip] {
margin: 0.5rem;
max-inline-size: 9rem;
}
.custom {
[tuiFade] {
flex: 1 1 auto;
}
}
Taiga UI