Badge

import '@rhds/elements/rh-badge/rh-badge.js';

<rh-badge number="7">7</rh-badge>

import '@rhds/elements/rh-badge/rh-badge.js';

<rh-badge number="7" state="caution">7</rh-badge>
<rh-badge number="24" state="caution">24</rh-badge>
<rh-badge number="240" state="caution">240</rh-badge>
<rh-badge threshold="900" number="999" state="caution">999</rh-badge>

import '@rhds/elements/rh-badge/rh-badge.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';

<rh-context-demo>
  <rh-badge number="1">1</rh-badge>
  <rh-badge number="1" state="danger">1</rh-badge>
  <rh-badge number="2" state="caution">2</rh-badge>
  <rh-badge number="3" state="warning">3</rh-badge>
  <rh-badge number="5" state="info">5</rh-badge>
  <rh-badge number="8" state="success">8</rh-badge>
  <rh-badge number="1000" threshold="999" state="success">1000</rh-badge>
</rh-context-demo>

import '@rhds/elements/rh-badge/rh-badge.js';

<rh-badge number="7" state="danger">7</rh-badge>
<rh-badge number="24" state="danger">24</rh-badge>
<rh-badge number="240" state="danger">240</rh-badge>
<rh-badge threshold="900" number="999" state="danger">999</rh-badge>

import '@rhds/elements/rh-badge/rh-badge.js';

<rh-badge state="moderate" number="900">900</rh-badge>
<rh-badge state="important" number="900">900</rh-badge>
<rh-badge state="critical" number="900">900</rh-badge>
<rh-badge state="note" number="900">900</rh-badge>

import '@rhds/elements/rh-badge/rh-badge.js';

<rh-badge number="7" state="info">7</rh-badge>
<rh-badge number="24" state="info">24</rh-badge>
<rh-badge number="240" state="info">240</rh-badge>
<rh-badge threshold="900" number="999" state="info">999</rh-badge>

import '@rhds/elements/rh-badge/rh-badge.js';

<rh-badge number="7" state="neutral">7</rh-badge>
<rh-badge number="24" state="neutral">24</rh-badge>
<rh-badge number="240" state="neutral">240</rh-badge>
<rh-badge threshold="900" number="999" state="neutral">999</rh-badge>

import '@rhds/elements/rh-badge/rh-badge.js';

<rh-badge number="7" state="success">7</rh-badge>
<rh-badge number="24" state="success">24</rh-badge>
<rh-badge number="240" state="success">240</rh-badge>
<rh-badge threshold="900" number="999" state="success">999</rh-badge>

import '@rhds/elements/rh-badge/rh-badge.js';

<rh-badge number="900" threshold="100">900</rh-badge> (Threshold = 100)
<p>Should add '+' sign if the value exceeds the threshold</p>

import '@rhds/elements/rh-badge/rh-badge.js';

<rh-badge number="7" state="warning">7</rh-badge>
<rh-badge number="24" state="warning">24</rh-badge>
<rh-badge number="240" state="warning">240</rh-badge>
<rh-badge threshold="900" number="999" state="warning">999</rh-badge>