Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Badge

Source: TypeScript

Badges are colored text elements containing small bits of information. They are used for labeling content, displaying metadata and/or highlighting information.

Open in a
new tab
<span theme="badge">Pending</span>
<span theme="badge success">Confirmed</span>
<span theme="badge error">Denied</span>
<span theme="badge contrast">On hold</span>
Note
Import styles

Badge is a set of CSS classes rather than a web / Flow component. The Badge-specific CSS classes are available as part of the Lumo theme. To use these classes in your application, enable them in your theme’s theme.json:

{
  "lumoImports": [<...>, "badge"]
}

The theme.json is located in the theme folder at /frontend/themes/<my-theme>/theme.json.

Label

Badges should contain a label. Labels should be clear, concise, and written using sentence case. Aim for 1 to 2 words.

Icons

Badges can contain icons as well as text. Icons can be placed on either side of the text.

Open in a
new tab
<vaadin-vertical-layout theme="spacing">
  <vaadin-horizontal-layout theme="spacing">
    <span theme="badge">
      <vaadin-icon icon="vaadin:clock" style="padding: var(--lumo-space-xs)"></vaadin-icon>
      <span>Pending</span>
    </span>
    <span theme="badge success">
      <vaadin-icon icon="vaadin:check" style="padding: var(--lumo-space-xs)"></vaadin-icon>
      <span>Confirmed</span>
    </span>
    <span theme="badge error">
      <vaadin-icon
        icon="vaadin:exclamation-circle-o"
        style="padding: var(--lumo-space-xs)"
      ></vaadin-icon>
      <span>Denied</span>
    </span>
    <span theme="badge contrast">
      <vaadin-icon icon="vaadin:hand" style="padding: var(--lumo-space-xs)"></vaadin-icon>
      <span>On hold</span>
    </span>
  </vaadin-horizontal-layout>
  <vaadin-horizontal-layout theme="spacing">
    <span theme="badge">
      <span>Pending</span>
      <vaadin-icon icon="vaadin:clock" style="padding: var(--lumo-space-xs)"></vaadin-icon>
    </span>
    <span theme="badge success">
      <span>Confirmed</span>
      <vaadin-icon icon="vaadin:check" style="padding: var(--lumo-space-xs)"></vaadin-icon>
    </span>
    <span theme="badge error">
      <span>Denied</span>
      <vaadin-icon
        icon="vaadin:exclamation-circle-o"
        style="padding: var(--lumo-space-xs)"
      ></vaadin-icon>
    </span>
    <span theme="badge contrast">
      <span>On hold</span>
      <vaadin-icon icon="vaadin:hand" style="padding: var(--lumo-space-xs)"></vaadin-icon>
    </span>
  </vaadin-horizontal-layout>
</vaadin-vertical-layout>
Note
Use icons sparingly
The benefit of using icons should be weighed against the visual noise it adds.

Icon-Only

Badges can also be used with icons without a label. For accessibility, a tooltip and aria-label attribute is recommended to ensure that all users can identify their meaning.

Open in a
new tab
<vaadin-icon
  aria-label="Confirmed"
  icon="vaadin:check"
  style="padding: var(--lumo-space-xs)"
  theme="badge success"
  title="Confirmed"
></vaadin-icon>
<vaadin-icon
  aria-label="Cancelled"
  icon="vaadin:close-small"
  style="padding: var(--lumo-space-xs)"
  theme="badge error"
  title="Cancelled"
></vaadin-icon>

Icon-only badges should primarily be used for common recurring content with highly standardized, universally understood icons (such as a checkmark for "yes"), and for content that’s repeated, for example in lists and tables.

Open in a
new tab
const renderBoolean: GridColumnBodyLitRenderer<UserPermissions> = (item, _model, column) => {
  let icon: string;
  let title: string;
  let theme: string;

  if (item[column.id as keyof UserPermissions]) {
    icon = 'vaadin:check';
    title = 'Yes';
    theme = 'success';
  } else {
    icon = 'vaadin:close-small';
    title = 'No';
    theme = 'error';
  }

  return html`
    <vaadin-icon
      aria-label="${title}"
      icon="${icon}"
      style="padding: var(--lumo-space-xs)"
      theme="badge ${theme}"
      title="${title}"
    ></vaadin-icon>
  `;
};

return html`
  <vaadin-grid .items="${this.items}">
    <vaadin-grid-column path="name" header="Name"></vaadin-grid-column>
    <vaadin-grid-column
      id="view"
      header="View"
      ${columnBodyRenderer(renderBoolean, [])}
    ></vaadin-grid-column>
    <vaadin-grid-column
      id="comment"
      header="Comment"
      ${columnBodyRenderer(renderBoolean, [])}
    ></vaadin-grid-column>
    <vaadin-grid-column
      id="edit"
      header="Edit"
      ${columnBodyRenderer(renderBoolean, [])}
    ></vaadin-grid-column>
  </vaadin-grid>
`;

Theme Variants

Badge features theme variants for different sizes, colors, and shapes. You can combine any theme variants together.

Size

Badges have two different sizes you can use: the default (normal) and small. Use the small theme variant to make a badge smaller, for example when space is limited or for compact parts of the UI.

Open in a
new tab
<span theme="badge small">Pending</span>
<span theme="badge success small">Confirmed</span>
<span theme="badge error small">Denied</span>
<span theme="badge contrast small">On hold</span>

Color

Badges have four different color variants: default, success, error, and contrast. The color variants can be paired with the primary theme variant for additional emphasis.

Open in a
new tab
<vaadin-vertical-layout theme="spacing">
  <vaadin-horizontal-layout theme="spacing">
    <span theme="badge">Pending</span>
    <span theme="badge success">Confirmed</span>
    <span theme="badge error">Denied</span>
    <span theme="badge contrast">On hold</span>
  </vaadin-horizontal-layout>
  <vaadin-horizontal-layout theme="spacing">
    <span theme="badge primary">Pending</span>
    <span theme="badge success primary">Confirmed</span>
    <span theme="badge error primary">Denied</span>
    <span theme="badge contrast primary">On hold</span>
  </vaadin-horizontal-layout>
</vaadin-vertical-layout>
Variant Theme name Usage recommendations

Normal

Default style. Recommended for informational messages. This style may be confused with a Button or link.

Success

Success

Highlight positive outcomes, such as when a task or operation is completed.

Error

Error

Use the error theme variant to communicate alerts, failures, or warnings.

Contrast

Contrast

A high-contrast version that improves legibility and distinguishes the badge from the rest of the UI. Recommended for neutral badges (that don’t communicate success or errors).

Primary

Primary

Used for important information and/or to draw more attention to your badge. Can be combined with all other theme variants.
Note
Accessibility
Assistive technologies, such as screen readers, interpret badges solely based on their content. Without proper context, they may end up confusing the user. If you are using colors and icons to convey information, provide the same info via aria-label to ensure that screen readers can interpret the information.

Shape

Applying the pill theme variant produces a badge with rounded corners. It can aid in making badges and buttons more distinct from one another.

Open in a
new tab
<span theme="badge pill">Pending</span>
<span theme="badge success pill">Confirmed</span>
<span theme="badge error pill">Denied</span>
<span theme="badge contrast pill">On hold</span>

Use Cases

Highlighting and Distinguishing Information

A typical use case for badges is to highlight an item’s status, for example in a Grid.

Open in a
new tab
return html`
  <vaadin-grid .items="${this.items}">
    <vaadin-grid-column path="report" header="Report"></vaadin-grid-column>
    <vaadin-grid-column
      header="Due date"
      ${columnBodyRenderer<Report>(
        ({ due }) => html`${dateFormatter.format(new Date(due))}`,
        []
      )}
    ></vaadin-grid-column>
    <vaadin-grid-column path="assignee" header="Assignee"></vaadin-grid-column>
    <vaadin-grid-column
      header="Status"
      ${columnBodyRenderer<Report>(({ status }) => {
        let title: string;
        let theme: string;

        switch (status) {
          case ReportStatus.COMPLETED:
            title = 'Completed';
            theme = 'success';
            break;
          case ReportStatus.IN_PROGRESS:
            title = 'In progress';
            theme = '';
            break;
          case ReportStatus.CANCELLED:
            title = 'Cancelled';
            theme = 'error';
            break;
          default:
            title = 'On hold';
            theme = 'contrast';
            break;
        }

        return html`<span theme="badge ${theme} primary">${title}</span>`;
      }, [])}
    ></vaadin-grid-column>
  </vaadin-grid>
`;

They are also often used for displaying metadata tags.

Interactive Content

Badges can house interactive content such as Anchors and Buttons. For example, Badges that highlight active filters might contain a "Clear" Button which removes the associated filter.

Open in a
new tab
return html`
  <vaadin-vertical-layout theme="spacing">
    <vaadin-combo-box
      label="Profession"
      .items="${this.items}"
      @change="${this.onChange}"
    ></vaadin-combo-box>
    <vaadin-horizontal-layout style="flex-wrap: wrap" theme="spacing">
      ${repeat(
        this.selectedProfessions,
        (profession) => profession,
        (profession) => html`
          <span theme="badge pill contrast">
            <span>${profession}</span>
            <vaadin-button
              aria-label="Clear filter: ${profession}"
              data-profession="${profession}"
              theme="contrast tertiary-inline"
              title="Clear filter: ${profession}"
              style="margin-inline-start: var(--lumo-space-xs)"
              @click="${this.onClick}"
            >
              <vaadin-icon icon="vaadin:close-small"></vaadin-icon>
            </vaadin-button>
          </span>
        `
      )}
    </vaadin-horizontal-layout>
  </vaadin-vertical-layout>
`;

Counter

Badges can be used as counters, for example to show the number of unread/new messages, selection count, etc.

Open in a
new tab
<vaadin-tabs>
  <vaadin-tab>
    <span>Inbox</span>
    <span
      theme="badge contrast pill small"
      aria-label="12 unread messages"
      title="12 unread messages"
    >
      12
    </span>
  </vaadin-tab>
  <vaadin-tab>
    <span>Important</span>
    <span
      theme="badge contrast pill small"
      aria-label="3 unread messages"
      title="3 unread messages"
    >
      3
    </span>
  </vaadin-tab>
  <vaadin-tab>
    <span>Spam</span>
    <span
      theme="badge contrast pill small"
      aria-label="45 unread messages"
      title="45 unread messages"
    >
      45
    </span>
  </vaadin-tab>
  <vaadin-tab>
    <span>Archive</span>
    <span
      theme="badge contrast pill small"
      aria-label="23 unread messages"
      title="23 unread messages"
    >
      23
    </span>
  </vaadin-tab>
</vaadin-tabs>

Assistive technologies, such as screen readers, interpret badges solely based on their content. Without proper context, they may end up confusing the user. To provide context for people using screen readers, set the badge’s aria-label attribute.

Best Practices

Badge vs Button

Badges and Buttons are similar in appearance. This might lead users to think that badges are interactive.

Placement, language, shape, and color can all help mitigate any confusion. First, badges shouldn’t be labeled with active verbs. They aren’t actions, but rather static text/content. Second, avoid placing badges directly next to Buttons, in particular if they are using similar themes. The pill theme variant may aid in making badges and Buttons more distinct from one another.

69AF8882-CA67-4AB8-BF9F-69A1EA6CE84C