Badge
On this page
On this page
Badge
Default badge displaying a numeric count with neutral state.
Edit element properties
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>
);Caution
Badge with caution state indicating items requiring immediate attention.
Edit element properties
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>
);Color Context
Badge rendered in light and dark color scheme contexts.
Edit element properties
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";
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<ContextDemo>
<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>
</ContextDemo>
);Danger
Badge with danger state indicating errors or blocking conditions.
Edit element properties
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>
);Deprecated States
Badge using deprecated state names (moderate, important, critical) that auto-convert to DPO equivalents.
Edit element properties
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>
);Info
Badge with info state indicating low-severity informational content.
Edit element properties
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>
);Neutral
Badge with explicit neutral state for generic information.
Edit element properties
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>
);Success
Badge with success state indicating completed or stable processes.
Edit element properties
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>
);Threshold
Badge demonstrating threshold behavior, displaying "999+" for large counts.
Edit element properties
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>
);Warning
Badge with warning state indicating non-blocking issues that may need action.
Edit element properties
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>
);Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
