Badge

Badges are easily scannable visual identifiers that help categorize items of a same nature on a page.

import * as React from 'react';
import { Badge } from '@itwin/itwinui-react';

export default () => {
  return <Badge backgroundColor='skyblue'>Badge</Badge>;
};

Badges are small visual identifiers with a label to categorize certain things, such as tiles or table rows. Badges are similar to tags in shape but they are not interchangeable, as they fulfill different roles. Unlike tags which are user-generated, badges are provided by the system.

Variants

Soft backgrounds

Soft background badge colors do not carry any meaning and are used solely for identification at a quick glance.

import * as React from 'react';
import { Badge } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <Badge backgroundColor='skyblue'>Skyblue</Badge>
      <Badge backgroundColor='celery'>Celery</Badge>
      <Badge backgroundColor='froly'>Froly</Badge>
      <Badge backgroundColor='steelblue'>Steelblue</Badge>
      <Badge backgroundColor='sunglow'>Sunglow</Badge>
      <Badge backgroundColor='seabuckthorn'>Seabuckthorn</Badge>
      <Badge backgroundColor='montecarlo'>Montecarlo</Badge>
      <Badge backgroundColor='poloblue'>Poloblue</Badge>
      <Badge backgroundColor='bouquet'>Bouquet</Badge>
      <Badge backgroundColor='ash'>Ash</Badge>
      <Badge backgroundColor='oak'>Oak</Badge>
    </div>
  );
};

Statuses

Status badge colors do carry a meaning and are used to quickly identify potential issues.

import * as React from 'react';
import { Badge } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <Badge>Default</Badge>
      <Badge backgroundColor='primary'>Informational</Badge>
      <Badge backgroundColor='positive'>Positive</Badge>
      <Badge backgroundColor='warning'>Warning</Badge>
      <Badge backgroundColor='negative'>Negative</Badge>
    </div>
  );
};

Usage

Use badges as a way to highlight certain items that must be easily told apart from other similar components in the same UI. For example, on a page where users can view project tiles, badges can be overlaid on projects that are from external sources, thus needing different permissions than internal projects.

Badges are not tags, so they should not be considered the same as keywords for helping users bring items up with queries.

The quantity of badges per component, unlike tags, is finite. Ideally, there should only be one badge per item. There may be up to three if necessary, though it is not recommended. Remember that badges are meant to be easy to spot and read; the more visual noise there is around one, the harder is it to identify it.

Label

Badge labels should be kept short. They are meant to be easily scannable by the user, so using long labels is strongly discouraged. Keep badge labels to one word if possible, three being the maximum if it is absolutely necessary. Do not use sentences for labels; they are too complex and defeat the purpose of a badge. If you are tempted to use a badge bearing a label that may be too long, consider breaking it up in different badges if possible.

Numerical labels

It is possible for badges to bear numerical labels instead of words. It’s the case for badges on video tiles; they are used to display the media’s duration, so the user knows what to expect before playing it.

Interactivity

Because they are read-only components, badges are devoid of state changes. This means that they should not have on-hover, on-click or any other interaction triggered by the user.

Badges cannot be edited, added or removed by the user. They are entirely managed by the system.

Props