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 bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-badge @element-public/themes

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

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, 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 |