---
title: Badge
category: components
b2c: true
expert: true
stable: done
alias: chip
a1: true
---

### Basic

You can change the color of the badge by setting the `type` to either `active`, `positive`, `critical` or `negative`.

<!-- example(badge) -->

### Vibrant

In order to use the vibrant styling of the badge, you can simply apply the `vibrant` input to the badge.

<!-- example(badge-vibrant) -->
