Badge

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

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

import { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Badge number="7">7</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 { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Badge number="7" state="caution">7</Badge>
  <Badge number="24" state="caution">24</Badge>
  <Badge number="240" state="caution">240</Badge>
  <Badge threshold="900" number="999" state="caution">999</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 { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <rh-context-demo>
    <Badge number="1">1</Badge>
    <Badge number="1" state="danger">1</Badge>
    <Badge number="2" state="caution">2</Badge>
    <Badge number="3" state="warning">3</Badge>
    <Badge number="5" state="info">5</Badge>
    <Badge number="8" state="success">8</Badge>
    <Badge number="1000" threshold="999" state="success">1000</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 { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Badge number="7" state="danger">7</Badge>
  <Badge number="24" state="danger">24</Badge>
  <Badge number="240" state="danger">240</Badge>
  <Badge threshold="900" number="999" state="danger">999</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 { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Badge state="moderate" number="900">900</Badge>
  <Badge state="important" number="900">900</Badge>
  <Badge state="critical" number="900">900</Badge>
  <Badge state="note" number="900">900</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 { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Badge number="7" state="info">7</Badge>
  <Badge number="24" state="info">24</Badge>
  <Badge number="240" state="info">240</Badge>
  <Badge threshold="900" number="999" state="info">999</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 { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Badge number="7" state="neutral">7</Badge>
  <Badge number="24" state="neutral">24</Badge>
  <Badge number="240" state="neutral">240</Badge>
  <Badge threshold="900" number="999" state="neutral">999</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 { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Badge number="7" state="success">7</Badge>
  <Badge number="24" state="success">24</Badge>
  <Badge number="240" state="success">240</Badge>
  <Badge threshold="900" number="999" state="success">999</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 { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Badge number="900" threshold="100">900</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>

import { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Badge number="7" state="warning">7</Badge>
  <Badge number="24" state="warning">24</Badge>
  <Badge number="240" state="warning">240</Badge>
  <Badge threshold="900" number="999" state="warning">999</Badge>
);