Resonance Design System
☰

Badge System generated label typically appended to another UI element.

A badge is a component attached to another part of the interface and used to display metadata about the item to which it is attached. Badges always modify or add information to something else. Badges always have text; some also have icons.

Table of contents

Usage guidelines

When to use

To display metadata or other secondary information associated with a specific UI element or aspect of the interface.

Examples:

  • In the editor's main dashboard, a badge in a table row shows that the story is embargoed.
  • When an image in the editor has a 'Sensitive image' flag, the image object in the editor has a badge stating so.
  • When someone in the editor is on a non-default story type, a badge at the top of the editor is used to label the interface as the version for that story type.
How to use

By default, do not use an icon unless you need to draw extra attention to the information.

Variations

Colors

There are three categories of badge color.

If not specified, badges will use the Gray color combination.

Gray

Gray is the default badge color.

Accent

Accent colors are available for when the UI requires more visual contrast than what the gray badges provide.

Status

Status colors are available for when you need to add semantic weight to your badges.

Positive status

Use grass badges to signal that the metadata is positive or successful.

Negative status

Use apple badges to signal that the metadata is cautionary or errorful.

Icons

In some situations, we may want to add a descriptive icon to the badge. Examples include status indicators or icons like the story type icons on the editor's dashboard. These should be used to help draw attention to the badge and to help with quickly filtering information, and not as the sole means of conveying information.

Wrap the text in a <span> so that the icon is centered and properly spaced.

Text doesn't work alone

Text does work alone

Sizes

We’ve developed five badge sizes in order to accommodate needs for a more compact or larger/more spacious screen design. The size of the badge should be proportional the type size of the element the badge is appended to. The largest size is reserved for contexts where it functions as metadata for a majority of the visible screen.

Attributes

An asterisk next to a value denotes that it is the default value for that attribute. Unless noted otherwise, attributes should be added to the component element directly. Boolean attributes work based on their presence or absence from the component.

<res-component booleanAttribute stringAttribute="parameter">    
  <child-element></child-element>
</res-component>
AttributeTypeDescription
sizestringSize of the badge
  • smallest
  • smaller
  • small
  • medium
  • large
designstringDesign/color theme
  • gray
  • rose
  • sky
  • gold
  • grass
  • apple

Notes

Supported optional DOM

If added as children, these elements will receive specific styles and/or functionality.

  • <res-icon> - Badge icon
  • <span> - Badge text (if there is an icon)

History

VersionNote
0.17.0Remove light variant of badge designs. Increase background color of default, sky, rose, and gold badges from the 200 color to 300. Increase grass and apple badge background to 500 and changes text color to white.
0.12.0Apply new spacing scale.
0.11.0Tweaks to accommodate new icon set
0.10.1Added two new size options: smaller and smallest.
0.10.0Added design attribute with preset color schemes.
0.7.3Initial build to spec.