Go Main page
Go Main page

Web components

cover

components

Badge

v.1.0.0 | Saturn

Usage

The name of the tokens object to style the badge component is BADGE_STYLES.

You cannot change the name of the tokens object.

Badge component has two ways to modify the styles:

  • Variant: modify the general styles of the Badge.
  • Size: modify the general size styles of the Badge.

The structure of the BADGE_STYLES object is:

Variant and Status

Each variant can have two status. status can modify the styles of the badge. The status are:

1234
enum BadgeStatus {
  OPEN = 'OPEN',
  CLOSE = 'CLOSE',
}

The tokens used are:

12345678910
const BADGE_STYLES = {
  [SIZE]: {
    icon: {
      width: string,
      height: string,
    },
    customDotTranslate: string,
    customDotNumberTranslate: string,
  },
  [VARIANT]: {

Example

badge theme object example:

12345678910
const BADGE_STYLES = {
  [SIZE]: {
    icon: {
      width: 'icon-width',
      height: 'icon-height',
    },
    customDotTranslate: 'translate(2px, 2px)',
    customDotNumberTranslate: 'translate(2px, 2px)',
  },
  [VARIANT]: {