Badge

Badges are compact visual clues that highlight key details on items or objects. Examples of highlighted information include statuses, total items within a group, or categories of related content.

For more information on how to use the features and props for this component, check out the developer documentation.

Alert Badges are small indicators that are often used alongside Icons or Avatars. They support two variants: success and urgent.

Count Badges are best used for displaying a count of items. It supports a few variants that change the background appearance of the Badge. The count should be passed in as children to the component. Any count over 99 will render as 99+.

Selectable Badges are interactable and may be selected or removed. Both onClick and onSelect callback functions will be triggered on user interaction of the Selectable badge, if they are provided. Interacting with the X Button will trigger an onRemove callback, if provided.

There is built-in support for the Escape key as well as Backspace and Delete, with additional keyboard support provided via the onKeyUp callback function.

Status Badges offer several variants that control the appearance of the Badge. The text for the Badge should be passed as children to the component. The text will be displayed in all caps.

Tag Badges are non-interactable Badges that are intended to display tag names for entities. They only accept strings as children.

NameTypeDefaultDescription
children*ReactTextThe content of the Badge, transformed to uppercase.
variant*
'success' |'urgent' |'warn' |'pending' |'info' 
Determines the color to render the Badge as. This color is derived from the Theme.

You can override the styles of the Badge components by setting a custom theme on the Configuration component.

{
          •           foreground: 'base.colors.green.dark', // → base.colors.green.dark
          •           background: 'base.colors.green.extra-light' // → base.colors.green.extra-light
          •         },
          •           foreground: 'base.colors.red.dark', // → base.colors.red.dark
          •           background: 'base.colors.red.extra-light' // → base.colors.red.extra-light
          •         },
          •           foreground: 'base.colors.orange.dark', // → base.colors.orange.dark
          •           background: 'base.colors.orange.extra-light' // → base.colors.orange.extra-light
          •         },
          •           foreground: 'base.colors.purple.dark', // → base.colors.purple.dark
          •           background: 'base.colors.purple.extra-light' // → base.colors.purple.extra-light
          •         },
          •           foreground: 'base.colors.slate.dark', // → base.colors.slate.dark
          •           background: 'base.colors.slate.extra-light' // → base.colors.slate.extra-light
          •         }
        •       },
        •         foreground: 'base.palette.interactive', // → base.palette.interactive
        •         background: 'base.palette.interactive' // → base.palette.interactive
        •       },
          •           foreground: 'base.colors.slate.extra-dark', // → base.colors.slate.extra-dark
          •           background: 'base.colors.slate.light' // → base.colors.slate.light
          •         },
          •           foreground: 'base.palette.light', // → base.palette.light
          •           background: 'base.palette.interactive' // → base.palette.interactive
          •         },
          •           foreground: 'base.palette.light', // → base.palette.light
          •           background: 'base.palette.interactive' // → base.palette.interactive
          •         },
          •           foreground: 'base.palette.light', // → base.palette.light
          •           background: 'base.palette.urgent' // → base.palette.urgent
          •         }
        •       },
          •           foreground: 'base.palette.dark', // → base.palette.dark
          •           background: 'base.palette.interactive' // → base.palette.interactive
          •         }
        •       },
          •           background: 'base.palette.urgent' // → base.palette.urgent
          •         },
          •           background: 'base.palette.success' // → base.palette.success
          •         },
          •           'border-color': 'base.palette.light' // → base.palette.light
          •         }
        •       }
      •     }
    •   }
}