Skip to content

Commit 06c6744

Browse files
New badge update (#7095)
Added some new info about pips and took out the brackets that were confusing people. Co-authored-by: Alex Page <[email protected]>
1 parent 896320e commit 06c6744

File tree

2 files changed

+16
-7
lines changed

2 files changed

+16
-7
lines changed

.changeset/beans-much-more.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'polaris.shopify.com': minor
3+
---
4+
5+
Update new badge pattern guidelines

polaris.shopify.com/content/foundations/patterns/new-badge/index.md

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: New badge
3-
description: The [New] badge can be used to inform merchants about the release of a feature that creates new value. It should be used sparingly and for a short time frame.
3+
description: The New badge can be used to inform merchants about the release of a feature that creates new value. It should be used sparingly and for a short time frame.
44
icon: StarFilledMinor
55
keywords:
66
- new badge
@@ -16,26 +16,30 @@ There’s opportunity to expand on this documentation. If you’d like to share
1616

1717
![Card with the new badge aligned to the right of the card heading](/images/foundations/patterns/new-badge/[email protected])
1818

19-
## When to use the [New] badge
19+
## When to use the New badge
2020

21-
The [New] badge should be used on features that have all of these 3 characteristics:
21+
The New badge should be used on features that have all of these 3 characteristics:
2222

2323
- We want to drive adoption of this feature
2424
- It’s creating new value for merchants (not just an improved way of doing something they are already doing)
2525
- It’s worth distracting our merchants from their current workflow to inform them about a whole new part of Shopify
2626

27-
Consider how the admin would look if it was cluttered with [New] badges or features of varying importance—overusing the badge creates unnecessary distraction and lessens its impact.
27+
Consider how the admin would look if it was cluttered with New badges or features of varying importance—overusing the badge creates unnecessary distraction and lessens its impact.
2828

29-
## How long to use the [New] badge
29+
## How long to use the New badge
3030

31-
[New] badges should have a short lifespan. The badge should disappear:
31+
New badges should have a short lifespan. The badge should disappear:
3232

3333
- When the user has clicked on the interactive element it’s attached to, or
3434
- 5 days after they first saw it, or
3535
- after 3 sessions, such as landing on a page 3 times
3636

37-
### What the [New] badge should look like
37+
### What the New badge should look like
3838

3939
- Use the [informational badge variant](https://polaris.shopify.com/components/badge) to achieve the correct styling and color
4040
- the badge should be right aligned or placed to the right of text
4141
- the [page component](https://polaris.shopify.com/components/page) in Polaris already places badges to the right of headings, so following this logic adds to the consistency of [New] badge use in the admin.
42+
43+
## Pips
44+
45+
A pip can be used to highlight a status or new element in a list. For example, it could be placed next to a new notification in a list of notifications. It should not be used for representing new features.

0 commit comments

Comments
 (0)