Chips

Source Edit this page

Chips helps in filter and label information.

Chips

Use chips as tag or as filter.

New Stable Release Depricated 
<span class="chip">New
	<i class="ri-close-line"></i>
</span>
<span class="chip chip-info">Stable</span>
<span class="chip chip-success">Release</span>
<span class="chip chip-danger">Depricated</span>

Variations

With the help of utilities different variations of a chips can be created.

Filled

Adjust color with color utilities.

New Stable Depricated 
<span class="chip bg-black fg-white">New
	<i class="ri-close-line"></i>
</span>
<span class="chip bg-success--light fg-success--ultra">Stable</span>
<span class="chip bg-danger fg-white">Depricated</span>

Shape

Adjust border radius and other border properties with border utilities.

New Stable Depricated 
	<span class="chip bg-black fg-white">New
		<i class="ri-close-line"></i>
	</span>
	<span class="chip bg-success fg-white">Stable</span>
	<span class="chip bg-danger fg-white">Depricated</span>

Size

Adjust the size of buttons with spacing and font utilities.

New Stable 
	<span class="chip bg-black fg-white rounded-full label-sm">New
		<i class="ri-close-line"></i>
	</span>
	<span class="chip bg-success fg-white rounded label-lg px-4">Stable</span>