Badge

The badge component enables users to categorize content effectively and uniformly across their interfaces. It offers a quick overview of a category or status and is frequently used to display numerical or status data.

Overview

Code

Props

Name	Type	Description	Default
New color	`'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'info' \| 'neutral' \| 'warning' \| 'error'`	Affects the visual style of the badge. It can be used following semantic purposes or not.	`'neutral'`
icon	`string \| (React.ReactNode & React.SVGProps <SVGSVGElement>)`	Material Symbol name or SVG element as the icon that will be placed next to the badge label. When using Material Symbols, replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the symbol name with `"filled_"`.	-
label	`string \| number`	Text to be placed in the badge.	-
mode	`'contextual' \| 'notification'`	The available badge modes.	`'contextual'`
notificationLimit	`number`	In notification mode, if the number entered as label is greater that this notification limit, `+notificationLimit` will be shown. If not, the entered text will be shown as label.	`99`
size	`'small' \| 'medium' \| 'large'`	Size of the component.	`'medium'`
title	`string`	Text representing advisory information related to the badge. Under the hood, this prop also serves as an accessible label for the component.	-

Examples

Contextual

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex gap="var(--spacing-gap-xl)" wrap="wrap">
        <DxcBadge label="Authorized" />
        <DxcBadge label="Reserved" color="secondary" />
        <DxcBadge label="Ready" color="success" />
        <DxcBadge label="Pending" color="warning" />
        <DxcBadge label="Unfulfilled" color="error" />
        <DxcBadge label="Paid" color="tertiary" />
        <DxcBadge label="Restocked" color="primary" />
      </DxcFlex>
    </DxcInset>
  );
};

Icons

() => {
  const icon = (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
    >
      <path d="M11 17H13V11H11V17ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM11 9H13V7H11V9Z" />
      <path d="M11 7H13V9H11V7ZM11 11H13V17H11V11Z" />
      <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" />
    </svg>
  );

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex gap="var(--spacing-gap-xl)" wrap="wrap">
        <DxcBadge label="Authorized" icon={icon} />
        <DxcBadge label="Reserved" color="secondary" icon={icon} />
        <DxcBadge label="Ready" color="success" icon={icon} />
        <DxcBadge label="Pending" color="warning" icon={icon} />
        <DxcBadge label="Unfulfilled" color="error" icon="error" />
        <DxcBadge label="Paid" color="tertiary" icon="euro" />
        <DxcBadge label="Restocked" color="primary" icon="refresh" />
      </DxcFlex>
    </DxcInset>
  );
}

Notification

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex gap="var(--spacing-gap-xl)">
        <DxcBadge mode="notification" />
        <DxcBadge label={10} mode="notification" />
        <DxcBadge label={100} mode="notification" />
      </DxcFlex>
    </DxcInset>
  );
}

Overview

Guidelines

Foundations

Migration

Utilities