Badge Element

The Badge element is a small, versatile indicator used to highlight status, categories, or new features with customizable colors and icons.

Live Preview

Badge Preview

Specifications

The Badge element provides a structured way to display metadata:

  • Sizing: Choose between Small, Medium, and Large scaling for different layout needs.
  • Icons: Just like buttons, badges support an integrated Icon on the left or right.
  • Rich Formatting: The badge content is editable and supports basic text styling through the builder.
  • Status Coloring: Use custom classes to define status colors like Success (Green), Warning (Amber), or Danger (Red).
  • Corner Styles: By default, badges are fully rounded, but this can be adjusted via custom CSS.

Interactions

Badges in SoloPage can respond to user input. They can be linked to Interactions (clicks, hovers) that trigger actions like opening a tooltip, navigating to a filtered view, or displaying extra info.

AI Guidance

How to prompt for Badges:

  • Add a green 'Verified' badge with a checkmark icon.
  • Create a small, subtle badge for the 'Beta' tag.
  • Insert a large amber badge that says 'Limited Offer'.