The Badge element provides a convenient and quick way to add badges to your site. You’ll be able to write in text for the Badge, as well as customize the look of it.

Content Controls


The content controls allow you to define the text of the Badge element.

  • Text – Write the text that is displayed within the element.

Design Controls


These controls offer different ways to change and modify the Badge element’s appearance.

  • Background – Select a color for your Badge’s background.
  • Padding – Decide on the internal spacing of the element.
  • Border Color – Set a color for the borders around the element.
  • Border Radius – Set the radius for the element’s border.


Typography settings offer control over the font styling, allowing you to adjust the font size, weight, line height, and other properties to achieve the perfect look and readability.


Spacing controls let you fine-tune the distance above and below the element, helping to create a balanced layout and ensure visual harmony on your page.

  • Margin Top – Increase or decrease the space above the element.
  • Margin Bottom – Adjust the space below the element.