# Badges Badges are the perfect component for labels and count values. ## Contextual Variations Using the `theme` prop you can easily change the appearance of your badge using the main theme colors: `primary, secondary, success, danger, warning, info, light` and `dark`. :::demo ```html
Primary Secondary Success Danger Warning Info Light Dark
``` ::: ## Pill-Shaped Badges Using the `pill` prop appiles a larger border radius that make your badges to look rounded. :::demo ```html
Primary Secondary Success Danger Warning Info Light Dark
``` ::: ## Outline Badges Using the `outline` prop removes the background color and applies a thin border that make your badges to look outlined. :::demo ```html
Primary Secondary Success Danger Warning Info Light Dark
``` ::: ## Mixed Effects You can also mix both `pill` and `outline` props to get mixed results. :::demo ```html
Primary Secondary Success Danger Warning Info Light Dark
``` ::: ## Link Badges Using the `href` or `to` prop you can turn your badges into regular or router links. :::demo ```html
Primary Secondary Success Danger Warning Info Light Dark
``` ::: ## Inherited Props > **Note:** This component is also inheriting the [Link](/docs/components/link) component's props.