Chips

On this page

# Intro

Chips can be created by using the chip class.

Chip
<span class="chip">Chip</span>

# Colors

The chip class has color modifiers available with -primary, -success, -warning, -danger, -dark, and -light. The -light modifier should only be used in the dark theme or inside darker elements.

PrimarySuccessWarningDangerDarkLight
<span class="chip -primary">Primary</span>

# Shape

You can change the shape of chips by using the border radius utility.

RectangleSmallNormalLargeFullCircle
<span class="chip --rectangle">Rectangle</span>

# Outline

Chips can be outlined using the -outline modifier. Backgrounds will be transparent.

DefaultPrimarySuccessWarningDangerDarkLight
<span class="chip -outline">Default</span>
<span class="chip -primary -outline">Primary</span>