---
title: Badge
airtableId: recso7QMfD2xwI04K
---
import { Badge } from "@calcom/ui/components/badge"
import { RenderComponentWithSnippet } from "@/app/components/render"
import { Row } from "@/app/components/row"
import { VariantsExample } from "./badge.variants"
import { IconsExample } from "./badge.icons"
import { DotsExample } from "./badge.dots"
import { InteractiveExample } from "./badge.interactive"
import { RoundedExample } from "./badge.rounded"

## Variants and Sizes

Badges come in different variants and sizes to suit various use cases.

<VariantsExample/>

## With Icons

Badges can include icons to provide additional visual context.

<IconsExample/>

## With Dots

Badges can include dots, useful for showing status or notifications.

<DotsExample/>

## Interactive

Badges can be made interactive with click handlers.

<InteractiveExample/>

## Rounded

Badges can be fully rounded, useful for numerical indicators.

<RoundedExample/>