Badge usage guidelines

Badges can be used to display small pieces of information, such as a status or a category. Placed near relevant content, they help capture user attention.

When to use

• To indicate a status (“Active”, “Shipped”, “Canceled”) or a priority (“Urgent”)
• To categorize information (e.g., surface, color)
• To show feature flags, version numbers, or priority levels
• To highlight relevant information with a specific tone

When not to use

• Use buttons or tags for scenarios that require user interaction.
• Use tags for content that is user-generated and/or customizable.
• For long descriptions or complex information.

Badges vs. tags
Badges and tags may look similar, but they serve different purposes:

• Badges are non-interactive, purely informational, and can be used on their own. They are a better fit for presenting predefined content.
• Tags are usually interactive, and can only be used as part of a group. They are a better fit for presenting user-generated content.

Properties

Size

Preview

Small

Medium

Large

Code

import { Badge, Stack } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack direction="horizontal" gap={16} align="center" wrap>
      <Badge size="small">Small</Badge>
      <Badge size="medium">Medium</Badge>
      <Badge size="large">Large</Badge>
    </Stack>
  );
}

Value	Use cases
Small	Small badges should be used sparingly in compact UI areas. They do not include icons due to their size. They work well for indicators like “New”.
Medium (default)	Medium badges are the default size in the design system and should be used in most cases.
Large	Large badges are suitable when space allows but should not overpower higher-priority elements to maintain visual hierarchy.

Tone

Preview

Base

Success

Info

Warning

Critical

Lime

Emerald

Indigo

Purple

Pink

Brown

Code

import { Badge, Stack } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack direction="vertical" gap={32}>
      <Stack direction="horizontal" gap={16} wrap>
        <Badge tone="base">Base</Badge>
        <Badge tone="success">Success</Badge>
        <Badge tone="info">Info</Badge>
        <Badge tone="warning">Warning</Badge>
        <Badge tone="critical">Critical</Badge>
      </Stack>

      <Stack direction="horizontal" gap={16} wrap>
        <Badge tone="lime">Lime</Badge>
        <Badge tone="emerald">Emerald</Badge>
        <Badge tone="indigo">Indigo</Badge>
        <Badge tone="purple">Purple</Badge>
        <Badge tone="pink">Pink</Badge>
        <Badge tone="brown">Brown</Badge>
      </Stack>
    </Stack>
  );
}

Value	Use cases
Base (default)	Base badges are neutral and used for non-critical information that doesn’t require much attention.
Success	Success badges indicate a successful status or completed action.
Info	Info badges highlight important details without implying positivity or negativity. They are often used for in-progress statuses.
Warning	Warning badges signal a sub-optimal but non-critical status with a slightly negative tone.
Critical	Critical badges highlight errors or issues that require user attention.
Support tones: Lime Emerald Indigo Purple Pink Brown	Support badges are mainly for categorization and don’t explicitly indicate system status, though they can be used for edge cases.

Formatting and layout

Placement

Place badges next to the relevant element to clearly indicate status or information. Avoid using them in isolation. In tables, use badges within columns to represent status or activity.

Do

All products*

Published

Published

Published

Don't

All products*

Published

Icons

For status indicators use standard icons that clearly suggest the meaning. A badge can use any icon from our library, but you should ensure that the icon’s message is consistent with the label.

Do

Delivered

Shipment delayed

Payment overdue

Don't

Delivered

Shipment delayed

Payment overdue

Content writing

• Use clear and concise labels with one or two words.
• Don’t use action language, as this can make users think that a badge is interactive. Use words like “Urgent” instead of “Take action”.

Behaviors

Non-interactive

A badge is a static (non-interactive) element. It only conveys information, and doesn’t provide any actions.