MoleculeBadgeCounter

MoleculeBadgeCounter is a component used for warning the user about new content or updates

Installation

$ npm install @s-ui/react-molecule-badge-counter --save

Usage

import MoleculeBadgeCounter, {
  moleculeBadgeCounterVariants,
  moleculeBadgeCounterSizes
} from '@s-ui/react-molecule-badge-counter'

Basic (Small)

<MoleculeBadgeCounter />

Dot Variant

<MoleculeBadgeCounter variant={moleculeBadgeCounterVariants.DOT} />

With Text

<MoleculeBadgeCounter>Text</MoleculeBadgeCounter>

With Icon

<MoleculeBadgeCounter>
  <Icon />
</MoleculeBadgeCounter>

Medium Size

<MoleculeBadgeCounter size="medium" />

Exclamation Variant

<MoleculeBadgeCounter
  variant={moleculeBadgeCounterVariants.EXCLAMATION}
  size={moleculeBadgeCounterSizes.MEDIUM}
/>

Extended Variant

<MoleculeBadgeCounter
  variant={moleculeBadgeCounterVariants.EXTENDED}
  size={moleculeBadgeCounterSizes.MEDIUM}
/>

Labels

<MoleculeBadgeCounter label="4" />
<MoleculeBadgeCounter label="42" />
<MoleculeBadgeCounter label="142" />

Find full description and more examples in the demo page.