Badge

Description

Badges are colored text elements that hold small amounts of information. Badges come in two versions, Label which can be used to add context to the UI or other elements and Notification which can indicate that a certain element within the UI can be interacted with to show new or updated information.

See live demos on storybook

Storybook Badge Demos

Install from Artifactory

• Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
  • Verify your token is correctly set up in your .npmrc as per the link above
• Verify you have the @element scope configured in your .npmrc
  • @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
• Install the component and themes bundles
  • npm i @element/react-components @element/themes
    • alternatively install the component individually along with the themes bundle npm i @element/react-badge @element/themes

Notes

Label Badges are great for indicating different categories, statuses, and products. Label Badges can include Icons, however if the Icon is a custom one, please ensure it is AA compliant. More details on this are listed below.

Notification Badges are great for alerting the user of new messages, alerts, or items that need attention. Notification Badges consist of numeric values and/or status light badges of various colors.

Usage

Badges are often used with other components, such as Icon and Icon Button. The Badge on the Icon Storybook example is a custom Icon Notification Badge. The component prevents extra small and small Icon sizes from being used as the custom Icon.

Accessibility Considerations

When selecting a custom Icon for a Label Badge, it is essential to ensure that the image is AA compliant. Refer to the following link, or one of many similar online resources, to check contrasting colors.

• https://webaim.org/resources/contrastchecker/

Label Badge Props

| Name | Type | Default | Required | Description | | ------------ | --------------------------------- | -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | label | string|function|React.ReactNode | null | false | Label to be displayed in the Badge. Usually a string, but can also be an x-small icon. | | labelType | string | 'string' | false | Label type to be displayed in the Badge.Accepted Values: string, icon | | leadingIcon | string|function|React.ReactNode | undefined | false | Adds the given Icon to the left of the label text. May not be used with trailingIcon or if labelType is icon - if leadingIcon and trailingIcon are both set, leadingIcon will take priority. If labelType is set to icon label will take priority. Expects the name of a valid Material.io icon, however an icon component may be passed in instead for more control. If a custom icon is used, the icon should not be larger than 9 x 9. | | themeColor | string | 'themeDefault' | false | Color of the badge. It will default according to your theme. For most themes that is primary.Accepted Values: themeDefault, primary, secondary, danger, success, blue, gray, green, orange, purple, red, teal, yellow, black, primary-variant, no-bg-on-darkDeprecated Values: primaryVariant | | trailingIcon | string|function|React.ReactNode | undefined | false | Adds the given Icon to the right of the label text. May not be used with leadingIcon or if labelType is icon - if leadingIcon and trailingIcon are both set, leadingIcon will take priority. If labelType is set to icon label will take priority. Expects the name of a valid Material.io icon, however an icon component may be passed in instead for more control. |

Notification Badge Props

| Name | Type | Default | Required | Description | | ---------- | ------ | -------- | -------- | ----------------------------------------------------------------------------------- | | counter | number | null | false | Number to be displayed in badge. Omit for a status light badge. | | max | number | 99 | false | Max number the badge can display. | | themeColor | string | 'danger' | false | Theme color of the badge.Accepted Values: primary, secondary, danger, success |