Cal.com
Components

Badge

View in AirtableView in Figma
Design:
Ready for dev
Dev:
Changes requested

Variants and Sizes

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

default

default
sm
default
md
default
lg

warning

warning
sm
warning
md
warning
lg

orange

orange
sm
orange
md
orange
lg

success

success
sm
success
md
success
lg

green

green
sm
green
md
green
lg

gray

gray
sm
gray
md
gray
lg

blue

blue
sm
blue
md
blue
lg

red

red
sm
red
md
red
lg

error

error
sm
error
md
error
lg

grayWithoutHover

grayWithoutHover
sm
grayWithoutHover
md
grayWithoutHover
lg

With Icons

Badges can include icons to provide additional visual context.

default
Icon
warning
Icon
orange
Icon
success
Icon
green
Icon
gray
Icon
blue
Icon
red
Icon
error
Icon
grayWithoutHover
Icon

With Dots

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

default
Dot
warning
Dot
orange
Dot
success
Dot
green
Dot
gray
Dot
blue
Dot
red
Dot
error
Dot
grayWithoutHover
Dot

Interactive

Badges can be made interactive with click handlers.

Clickable
Clickable
Clickable
Clickable
Clickable
Clickable
Clickable
Clickable
Clickable
Clickable

Rounded

Badges can be fully rounded, useful for numerical indicators.

1
default
1
warning
1
orange
1
success
1
green
1
gray
1
blue
1
red
1
error
1
grayWithoutHover

On this page