Badges
How to add and style badges.
What Are Badges?
'Badges' are small visual elements, that convey specific information or characteristics about a product, service, or item on an app or website.
Location in the Parts Library: Base Parts > Data Display > Badge
Why Are Badges Used?
Badges serve several purposes and are commonly used for the following reasons:
Highlighting Features or Benefits: To draw attention to particular features, benefits, or attributes of a product or service. For example, a badge might indicate that a product is "New," "On Sale," "Bestseller," or "Limited Edition," helping to grab the user's attention and encourage them to explore further.
Establishing Trust and Authority: To establish trust and credibility with users. For instance, trust badges such as "Secure Checkout," "SSL Certified," or "Money-Back Guarantee" reassure users about the safety and reliability of the website, leading to increased confidence in making a purchase or providing personal information.
Promotions and Discounts: To indicate promotions, discounts, or special offers. For example, a badge might display a percentage discount ("20% Off"), a specific promotion ("Free Shipping"), or a limited-time offer ("Sale").
Product Information: To convey important product information at a glance, such as product ratings ("5-Star Rating"), product status ("Out of Stock"), or product specifications ("Eco-Friendly," "Organic").
Visual Appeal and Branding: To contribute to the visual appeal and branding of a website. Designers can customize badges to align with the overall aesthetic of the site and reinforce brand identity through color, typography, and graphic elements.
Guiding User Behavior: To influence user behavior by directing attention to specific actions or choices. For example, a badge might encourage users to "Add to Cart," "Sign Up," or "Learn More," guiding them through the website's conversion funnel.
Adding a Badge
Choose the badge most closely aligned with what you need from the Parts Library.
Choose your preferred badge variation, select the part where you’d like to add your badge, and click ‘+ add to page’.
Editing and Formatting the Badge
Like many other parts, borders, shadow, opacity, rounding, and spacing can be applied using the property editor on the right, once the badge has been selected.
The text within the badge is edited the same as the way text is edited in other parts, using both the Text Editor and the Font Editor in the property editing panel on the right.
Adding An Icon to a Badge
Select the badge. Add a default icon by clicking "+" Icons. Select your preferred base icon. An icon will be added to the end of the badge (the 'append slot').
To change the default icon, select the icon to activate the Icon Editor in the right menu. Then click on Icon > Value Set to reveal all of the icons available for you to choose from, and select.
To change the position of an icon within the badge, select the icon, and go to Slot Position. You'll see there is the ability to append or prepend the icon. Prepending the icon places it at the beginning, and appending the icon places it at the end.
Badge Variants
There are two badge variants:
The 'Ghost' variant removes that faint outline that comes with a default badge and adds a neutral color to the badge.
The 'Outline' variant creates an outline around the badge, darker than the default outline.
Sizing
Badges come with preset sizes, as well as the ability to set the exact size. The preset sizes can be made responsive.
For example, you may want the badge to be small or extra small on mobile, and larger on a laptop.
Related Information
Last updated
Was this helpful?