Badge

Badges are one of the foundational elements of any application.

Overview

A visual indicator useful for status information or meta data associated with an element.

NEUTRALWARNINGSUCCESSDANGERACTIONNEUTRALWARNINGSUCCESSDANGERACTIONThe Badge Component.

Usage

The Badge component is an indicator component that displays information to the user. It comes in two varieties - the default, rectangular Badge, and the Pill variation.

Anatomy

Anatomy of the Badge component.PRIMARY2Label1
  1. Label. Labels describe the Badge to the user. If text is not used, an icon should be used in its place.
  2. Container. The container element wraps the component.

Sizing & Spacing

Badge component Sizes.REGULARSMALLLARGEXLARGE

The Badge component is available in four sizes - small, regular, large and xLarge.

States

NEUTRALWARNINGSUCCESSDANGERACTIONThe Badge component States

The Badge component has five available states to use - Neutral, Primary, Success, Warning, and Danger. The badge component does not have any interaction, so there are no 'hover/active' states available.

Hierarchy & Placement

Try to avoid mixing states and sizes, as this can become confusing for the user.

Pill

NEUTRALWARNINGSUCCESSDANGERACTIONNEUTRALWARNINGSUCCESSDANGERACTIONThe Pill Badge Component.

The Pill Badge is a variation of the Badge component.

Usage

The Pill Badge is used predominantly to act as a counter, displaying integer numbers (e.g. as a notification badge).

States

NEUTRALWARNINGSUCCESSDANGERACTIONThe Pill Badge component States

The Pill Badge component is also available in 5 states - Neutral, Primary, Success, Warning, and Danger.

A Button can be solid or faded and can either be a regular badge shape or more rounded in the form of a pill.

Basic Usage

Neutral
<Badge color="neutral" colorVariant="faded">Neutral</Badge>

Variants

Badges can be rendered using a variety of colours combined with an instruction to render a faded or solid badge.

NeutralPrimaryDangerWarningSuccess

NeutralPrimaryDangerWarningSuccess

<Badge color="neutral" colorVariant="faded">Neutral</Badge>
<Badge color="action" colorVariant="faded">Primary</Badge>
<Badge color="danger" colorVariant="faded">Danger</Badge>
<Badge color="warning" colorVariant="faded">Warning</Badge>
<Badge color="success" colorVariant="faded">Success</Badge>
<Badge color="neutral" colorVariant="solid">Neutral</Badge>
<Badge color="action" colorVariant="solid">Primary</Badge>
<Badge color="danger" colorVariant="solid">Danger</Badge>
<Badge color="warning" colorVariant="solid">Warning</Badge>
<Badge color="success" colorVariant="solid">Success</Badge>

Sizes

Badges can be rendered in four different size variants.

SmallNeutralLargexLarge
<Badge colorVariant="faded" size="small">Small</Badge>
<Badge colorVariant="faded" size="regular">Neutral</Badge>
<Badge colorVariant="faded" size="large">Large</Badge>
<Badge colorVariant="faded" size="xlarge">xLarge</Badge>

Pill variations

Icons can be added to a button and currently can only be shown to the right of the label. Icons should take the form of an SVG component.

NeutralPrimaryDangerWarningSuccess
<Badge color="neutral" variant="pill">Neutral</Badge>
<Badge color="action" variant="pill">Primary</Badge>
<Badge color="danger" variant="pill">Danger</Badge>
<Badge color="warning" variant="pill">Warning</Badge>
<Badge color="success" variant="pill">Success</Badge>

Properties

NameTypeRequiredDefaultDescription
childrenReactNodeTruen/aThe content to place in the button, typically text
classNamestringFalsen/aCustom css class to add to the badge element
colorstring (neutral / action / danger / warning / success)FalseneutralThe colour for the badge
colorVariantstring (solid / faded)FalsesolidThe colour style for the button
sizestring (small / regular / large / xlarge)FalseregularThe size for the button
variantstring (pill)Falsen/aThe style variation