@s-ui/react-molecule-badge-counter

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

Usage no npm install needed!

<script type="module">
  import sUiReactMoleculeBadgeCounter from 'https://cdn.skypack.dev/@s-ui/react-molecule-badge-counter';
</script>

README

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.