Badge
Badges are now deprecated in favor of Callouts.
As of visage-core 4.14, Badges are now deprecated in favor of Callouts.
Badges have been restyled to have a current look, but we will no longer be supporting or updating them going forward, so please update any Badges on your page to use Callouts instead!
Playground
Recommended - an example of a badge using the default skin
50% off - using the "discount" skin for discount prices
New! - using the "announcement" skin for announcements
Through Dec 25 - using the "holiday" skin
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| skin | "discount" | "holiday" | "standard" | "announcement" | "standard" | The visual style of the Badge |
| allCaps | boolean | true | Whether or not the Badge should render its content with ALL CAPS |
Design Guidelines
Design Guidelines
Vistaprint's badges currently look mostly like normal text, but many sites might want a pill-shaped badge with a colored background. (Visage's themes allow a site to give a Badge such an appearance.) This is why we treat Badges as a separate component, and not just as colored text.
Copy Guidelines
Text should be short — no more than 14 characters. If there is not enough room to display the whole component, its text will ellipse.
A badge that says "New" should only be used for products launched within the last 6 months.
A badge that says "Top Rated" should only be used for products with a rating of 3.5 stars or more.
A badge that says "Up to NN% Off" should only be used for product "Red" sales.