Description
A what's new badge is a gold circle that helps users discover new product features.
Anatomy
- A what's new badge is not separate from the button, menu, or item it promotes. It does not change the behavior of the associated component.
- A what's new badge persists until the user selects the associated component and a what's new carousel or contextual popup is loaded.
States
A what's new badge has no states. It persists on hover.
Size
A what's new badge is available in the following sizes depending on your product.
Position
Horizontal navigation
- Icons. Use a what's new badge on top of an enabled or disabled icon. The badge is contained in the bounds of the icon.
- Tabs. Place the what's new badge to the right of the tab label with a 4 pixel gap.
Vertical navigation
Single-layer navigation
- Badge size: 10 pixels.
- Right padding: 16 pixels.
- Badge center-aligned with text and navigation field.
Multi-layer navigation
- Badge size: 10 pixels.
- Right padding: 4 pixels.
- Badge or rows with no chevron are aligned with badges located on a row with chevron.
- Badge center-aligned with text and navigation field.
Navigation with no icons
- Badge size: 10 pixels.
- Right padding: 16 pixels.
- Left padding: 16 pixels.
- Badge center-aligned with text and navigation field.
Buttons
Ghost CTA
- Badge size: 10 pixels.
- Left padding: 4 pixels.
- Right padding: 1 pixel.
- Badge center-aligned with text.
Small CTA
- Badge size: 12 pixels.
- Left padding: 4 pixels.
- Right padding: 16 pixels.
- Badge center-aligned with text.
Medium CTA
- Badge size: 14 pixels.
- Left padding: 4 pixels.
- Right padding: 24 pixels.
- Badge center-aligned with text.
Ghost CTA
- Badge size: 16 pixels.
- Left padding: 4 pixels.
- Right padding: 36 pixels.
- Badge center-aligned with text.
Links
Best practices
- Use a what's new badge sparingly and don't highlight too many features on the same screen.
- Use a what's new badge at the highest level possible.