/

Documentation

/

Badges

Badges

The Badges components provide compact, attention-grabbing labels that highlight key information like status, categories, or tags. Designed for clarity and visual impact, they add quick context and improve content organization without overwhelming your layout.

Solid Badges

Component

Solid Badges feature bold background colors with clear, legible text—designed to draw attention and emphasize important labels or statuses. Their strong visual presence makes them ideal for highlighting key information in a compact, impactful way.

Variants

The solid badge ships with 4 different variants.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Experience
Experience
Experience
Experience

Pastel Badges

Component

Pastel Badges offer soft, muted background colors paired with clear text for a gentle, approachable look. Perfect for subtle labels or categories, they add visual interest without overpowering your design.

Variants

The pastel badge ships with 6 different variants.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Experience
Experience
Experience
Experience
Experience
Experience

Summary

The Badges collection includes solid and pastel styles to highlight key information with clarity and visual balance. Solid Badges use bold colors for strong emphasis, while Pastel Badges provide a softer, more subtle look—both designed to enhance content organization across your site.

Create a free website with Framer, the website builder loved by startups, designers and agencies.