Tag
On this page
On this page
Tag
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';<rh-tag>Tag</rh-tag>import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tag>Tag</Tag>
);Color Context
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';dl {
margin: 0;
display: grid;
gap: var(--rh-space-sm, 6px);
grid-template-columns: max-content 1fr;
}<rh-context-demo>
<dl>
<dt>Filled</dt>
<dd>
<rh-tag color="red">Red</rh-tag>
<rh-tag color="red-orange">Red Orange</rh-tag>
<rh-tag color="orange">Orange</rh-tag>
<rh-tag color="yellow">Yellow</rh-tag>
<rh-tag color="green">Green</rh-tag>
<rh-tag color="teal">Teal</rh-tag>
<rh-tag color="blue">Blue</rh-tag>
<rh-tag color="purple">Purple</rh-tag>
<rh-tag color="gray">Gray</rh-tag>
</dd>
<dt>Filled with icon</dt>
<dd>
<rh-tag color="red" icon="information-fill">Red</rh-tag>
<rh-tag color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag color="green" icon="information-fill">Green</rh-tag>
<rh-tag color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Filled with slotted icon</dt>
<dd>
<rh-tag color="red"> Red <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag color="red-orange"> Red Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag color="orange">Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag color="yellow">Yellow <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag color="green">Green <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag color="teal" icon="information">Teal <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag color="blue" icon="information">Blue <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag icon="information">Gray <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
</dd>
<dt>Filled with link</dt>
<dd>
<rh-tag href="#" color="red">Red</rh-tag>
<rh-tag href="#" color="red-orange">Red Orange</rh-tag>
<rh-tag href="#" color="orange">Orange</rh-tag>
<rh-tag href="#" color="yellow">Yellow</rh-tag>
<rh-tag href="#" color="green">Green</rh-tag>
<rh-tag href="#" color="teal">Teal</rh-tag>
<rh-tag href="#" color="blue">Blue</rh-tag>
<rh-tag href="#" color="purple">Purple</rh-tag>
<rh-tag href="#" color="gray">Gray</rh-tag>
</dd>
<dt>Filled with icon and link</dt>
<dd>
<rh-tag href="#" color="red" icon="information-fill">Red</rh-tag>
<rh-tag href="#" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag href="#" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag href="#" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag href="#" color="green" icon="information-fill">Green</rh-tag>
<rh-tag href="#" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag href="#" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag href="#" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag href="#" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Filled with slotted icon and link</dt>
<dd>
<rh-tag href="#" color="red"> Red <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" color="red-orange"> Red Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" color="orange">Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" color="yellow">Yellow <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" color="green">Green <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" color="teal" icon="information">Teal <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" color="blue" icon="information">Blue <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" icon="information">Gray <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
</dd>
<dt>Outline</dt>
<dd>
<rh-tag variant="outline" color="red">Red</rh-tag>
<rh-tag variant="outline" color="red-orange">Red Orange</rh-tag>
<rh-tag variant="outline" color="orange">Orange</rh-tag>
<rh-tag variant="outline" color="yellow">Yellow</rh-tag>
<rh-tag variant="outline" color="green">Green</rh-tag>
<rh-tag variant="outline" color="teal">Teal</rh-tag>
<rh-tag variant="outline" color="blue">Blue</rh-tag>
<rh-tag variant="outline" color="purple">Purple</rh-tag>
<rh-tag variant="outline" color="gray">Gray</rh-tag>
</dd>
<dt>Outlined with icon</dt>
<dd>
<rh-tag variant="outline" color="red" icon="information-fill">Red</rh-tag>
<rh-tag variant="outline" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag variant="outline" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag variant="outline" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag variant="outline" color="green" icon="information-fill">Green</rh-tag>
<rh-tag variant="outline" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag variant="outline" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag variant="outline" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag variant="outline" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Outlined with slotted icon</dt>
<dd>
<rh-tag variant="outline" color="red">Red <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="red-orange">Red Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="orange">Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="yellow">Yellow <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="green">Green <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="teal" icon="information">Teal <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="blue" icon="information">Blue <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="gray icon=" information"="">Gray <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
</dd>
<dt>Outline with link</dt>
<dd>
<rh-tag href="#" variant="outline" color="red">Red</rh-tag>
<rh-tag href="#" variant="outline" color="red-orange">Red Orange</rh-tag>
<rh-tag href="#" variant="outline" color="orange">Orange</rh-tag>
<rh-tag href="#" variant="outline" color="yellow">Yellow</rh-tag>
<rh-tag href="#" variant="outline" color="green">Green</rh-tag>
<rh-tag href="#" variant="outline" color="teal">Teal</rh-tag>
<rh-tag href="#" variant="outline" color="blue">Blue</rh-tag>
<rh-tag href="#" variant="outline" color="purple">Purple</rh-tag>
<rh-tag href="#" variant="outline" color="gray">Gray</rh-tag>
</dd>
<dt>Outlined with icon and link</dt>
<dd>
<rh-tag href="#" variant="outline" color="red" icon="information-fill">Red</rh-tag>
<rh-tag href="#" variant="outline" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag href="#" variant="outline" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag href="#" variant="outline" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag href="#" variant="outline" color="green" icon="information-fill">Green</rh-tag>
<rh-tag href="#" variant="outline" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag href="#" variant="outline" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag href="#" variant="outline" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag href="#" variant="outline" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Outlined with slotted icon and link</dt>
<dd>
<rh-tag href="#" variant="outline" color="red">Red <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="outline" color="red-orange">Red Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="outline" color="orange">Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="outline" color="yellow">Yellow <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="outline" color="green">Green <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="outline" color="teal" icon="information">Teal <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="outline" color="blue" icon="information">Blue <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="outline" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="outline" color="gray icon=" information"="">Gray <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
</dd>
<dt>Desaturated</dt>
<dd>
<rh-tag variant="desaturated" color="red">Red</rh-tag>
<rh-tag variant="desaturated" color="red-orange">Red Orange</rh-tag>
<rh-tag variant="desaturated" color="orange">Orange</rh-tag>
<rh-tag variant="desaturated" color="yellow">Yellow</rh-tag>
<rh-tag variant="desaturated" color="green">Green</rh-tag>
<rh-tag variant="desaturated" color="teal">Teal</rh-tag>
<rh-tag variant="desaturated" color="blue">Blue</rh-tag>
<rh-tag variant="desaturated" color="purple">Purple</rh-tag>
<rh-tag variant="desaturated" color="gray">Gray</rh-tag>
</dd>
<dt>Desaturated with icon</dt>
<dd>
<rh-tag variant="desaturated" color="red" icon="information-fill">Red</rh-tag>
<rh-tag variant="desaturated" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag variant="desaturated" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag variant="desaturated" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag variant="desaturated" color="green" icon="information-fill">Green</rh-tag>
<rh-tag variant="desaturated" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag variant="desaturated" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag variant="desaturated" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag variant="desaturated" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Desaturated with slotted icon</dt>
<dd>
<rh-tag variant="desaturated" color="red">Red <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="desaturated" color="red-orange">Red Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="desaturated" color="orange">Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="desaturated" color="yellow">Yellow <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="desaturated" color="green">Green <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="desaturated" color="teal" icon="information">Teal <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="desaturated" color="blue" icon="information">Blue <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="desaturated" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag variant="desaturated" color="gray icon=" information"="">Gray <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
</dd>
<dt>Desaturated with link</dt>
<dd>
<rh-tag href="#" variant="desaturated" color="red">Red</rh-tag>
<rh-tag href="#" variant="desaturated" color="red-orange">Red Orange</rh-tag>
<rh-tag href="#" variant="desaturated" color="orange">Orange</rh-tag>
<rh-tag href="#" variant="desaturated" color="yellow">Yellow</rh-tag>
<rh-tag href="#" variant="desaturated" color="green">Green</rh-tag>
<rh-tag href="#" variant="desaturated" color="teal">Teal</rh-tag>
<rh-tag href="#" variant="desaturated" color="blue">Blue</rh-tag>
<rh-tag href="#" variant="desaturated" color="purple">Purple</rh-tag>
<rh-tag href="#" variant="desaturated" color="gray">Gray</rh-tag>
</dd>
<dt>Desaturated with icon and link</dt>
<dd>
<rh-tag href="#" variant="desaturated" color="red" icon="information-fill">Red</rh-tag>
<rh-tag href="#" variant="desaturated" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag href="#" variant="desaturated" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag href="#" variant="desaturated" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag href="#" variant="desaturated" color="green" icon="information-fill">Green</rh-tag>
<rh-tag href="#" variant="desaturated" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag href="#" variant="desaturated" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag href="#" variant="desaturated" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag href="#" variant="desaturated" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Desaturated with slotted icon and link</dt>
<dd>
<rh-tag href="#" variant="desaturated" color="red">Red <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="desaturated" color="red-orange">Red Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="desaturated" color="orange">Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="desaturated" color="yellow">Yellow <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="desaturated" color="green">Green <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="desaturated" color="teal" icon="information">Teal <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="desaturated" color="blue" icon="information">Blue <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="desaturated" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag href="#" variant="desaturated" color="gray icon=" information"="">Gray <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
</dd>
<dt>Compact filled</dt>
<dd>
<rh-tag size="compact" color="red">Red</rh-tag>
<rh-tag size="compact" color="red-orange">Red Orange</rh-tag>
<rh-tag size="compact" color="orange">Orange</rh-tag>
<rh-tag size="compact" color="yellow">Yellow</rh-tag>
<rh-tag size="compact" color="green">Green</rh-tag>
<rh-tag size="compact" color="teal">Teal</rh-tag>
<rh-tag size="compact" color="blue">Blue</rh-tag>
<rh-tag size="compact" color="purple">Purple</rh-tag>
<rh-tag size="compact" color="gray">Gray</rh-tag>
</dd>
<dt>Compact filled with icon</dt>
<dd>
<rh-tag size="compact" color="red" icon="information-fill">Red</rh-tag>
<rh-tag size="compact" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag size="compact" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag size="compact" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag size="compact" color="green" icon="information-fill">Green</rh-tag>
<rh-tag size="compact" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag size="compact" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag size="compact" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag size="compact" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Compact filled with slotted icon</dt>
<dd>
<rh-tag size="compact" color="red"> Red <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" color="red-orange"> Red Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" color="orange">Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" color="yellow">Yellow <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" color="green">Green <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" color="teal" icon="information">Teal <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" color="blue" icon="information">Blue <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" icon="information">Gray <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
</dd>
<dt>Compact filled with link</dt>
<dd>
<rh-tag size="compact" href="#" color="red">Red</rh-tag>
<rh-tag size="compact" href="#" color="red-orange">Red Orange</rh-tag>
<rh-tag size="compact" href="#" color="orange">Orange</rh-tag>
<rh-tag size="compact" href="#" color="yellow">Yellow</rh-tag>
<rh-tag size="compact" href="#" color="green">Green</rh-tag>
<rh-tag size="compact" href="#" color="teal">Teal</rh-tag>
<rh-tag size="compact" href="#" color="blue">Blue</rh-tag>
<rh-tag size="compact" href="#" color="purple">Purple</rh-tag>
<rh-tag size="compact" href="#" color="gray">Gray</rh-tag>
</dd>
<dt>Compact filled with icon and link</dt>
<dd>
<rh-tag size="compact" href="#" color="red" icon="information-fill">Red</rh-tag>
<rh-tag size="compact" href="#" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag size="compact" href="#" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag size="compact" href="#" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag size="compact" href="#" color="green" icon="information-fill">Green</rh-tag>
<rh-tag size="compact" href="#" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag size="compact" href="#" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag size="compact" href="#" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag size="compact" href="#" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Compact filled with slotted icon and link</dt>
<dd>
<rh-tag size="compact" href="#" color="red"> Red <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" color="red-orange"> Red Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" color="orange">Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" color="yellow">Yellow <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" color="green">Green <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" color="teal" icon="information">Teal <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" color="blue" icon="information">Blue <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" icon="information">Gray <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
</dd>
<dt>Compact outline</dt>
<dd>
<rh-tag size="compact" variant="outline" color="red">Red</rh-tag>
<rh-tag size="compact" variant="outline" color="red-orange">Red Orange</rh-tag>
<rh-tag size="compact" variant="outline" color="orange">Orange</rh-tag>
<rh-tag size="compact" variant="outline" color="yellow">Yellow</rh-tag>
<rh-tag size="compact" variant="outline" color="green">Green</rh-tag>
<rh-tag size="compact" variant="outline" color="teal">Teal</rh-tag>
<rh-tag size="compact" variant="outline" color="blue">Blue</rh-tag>
<rh-tag size="compact" variant="outline" color="purple">Purple</rh-tag>
<rh-tag size="compact" variant="outline" color="gray">Gray</rh-tag>
</dd>
<dt>Compact outlined with icon</dt>
<dd>
<rh-tag size="compact" variant="outline" color="red" icon="information-fill">Red</rh-tag>
<rh-tag size="compact" variant="outline" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag size="compact" variant="outline" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag size="compact" variant="outline" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag size="compact" variant="outline" color="green" icon="information-fill">Green</rh-tag>
<rh-tag size="compact" variant="outline" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag size="compact" variant="outline" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag size="compact" variant="outline" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag size="compact" variant="outline" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Compact outlined with slotted icon</dt>
<dd>
<rh-tag size="compact" variant="outline" color="red">Red <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="outline" color="red-orange">Red Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="outline" color="orange">Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="outline" color="yellow">Yellow <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="outline" color="green">Green <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="outline" color="teal" icon="information">Teal <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="outline" color="blue" icon="information">Blue <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="outline" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="outline" color="gray icon=" information"="">Gray <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
</dd>
<dt>Compact outline with link</dt>
<dd>
<rh-tag size="compact" href="#" variant="outline" color="red">Red</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="red-orange">Red Orange</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="orange">Orange</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="yellow">Yellow</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="green">Green</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="teal">Teal</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="blue">Blue</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="purple">Purple</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="gray">Gray</rh-tag>
</dd>
<dt>Compact outlined with icon and link</dt>
<dd>
<rh-tag size="compact" href="#" variant="outline" color="red" icon="information-fill">Red</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="green" icon="information-fill">Green</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Compact outlined with slotted icon and link</dt>
<dd>
<rh-tag size="compact" href="#" variant="outline" color="red">Red <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="red-orange">Red Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="orange">Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="yellow">Yellow <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="green">Green <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="teal" icon="information">Teal <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="blue" icon="information">Blue <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="outline" color="gray icon=" information"="">Gray <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
</dd>
<dt>Compact desaturated</dt>
<dd>
<rh-tag size="compact" variant="desaturated" color="red">Red</rh-tag>
<rh-tag size="compact" variant="desaturated" color="red-orange">Red Orange</rh-tag>
<rh-tag size="compact" variant="desaturated" color="orange">Orange</rh-tag>
<rh-tag size="compact" variant="desaturated" color="yellow">Yellow</rh-tag>
<rh-tag size="compact" variant="desaturated" color="green">Green</rh-tag>
<rh-tag size="compact" variant="desaturated" color="teal">Teal</rh-tag>
<rh-tag size="compact" variant="desaturated" color="blue">Blue</rh-tag>
<rh-tag size="compact" variant="desaturated" color="purple">Purple</rh-tag>
<rh-tag size="compact" variant="desaturated" color="gray">Gray</rh-tag>
</dd>
<dt>Compact desaturated with icon</dt>
<dd>
<rh-tag size="compact" variant="desaturated" color="red" icon="information-fill">Red</rh-tag>
<rh-tag size="compact" variant="desaturated" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag size="compact" variant="desaturated" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag size="compact" variant="desaturated" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag size="compact" variant="desaturated" color="green" icon="information-fill">Green</rh-tag>
<rh-tag size="compact" variant="desaturated" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag size="compact" variant="desaturated" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag size="compact" variant="desaturated" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag size="compact" variant="desaturated" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Compact desaturated with slotted icon</dt>
<dd>
<rh-tag size="compact" variant="desaturated" color="red">Red <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="desaturated" color="red-orange">Red Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="desaturated" color="orange">Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="desaturated" color="yellow">Yellow <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="desaturated" color="green">Green <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="desaturated" color="teal" icon="information">Teal <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="desaturated" color="blue" icon="information">Blue <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="desaturated" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" variant="desaturated" color="gray icon=" information"="">Gray <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
</dd>
<dt>Compact desaturated with link</dt>
<dd>
<rh-tag size="compact" href="#" variant="desaturated" color="red">Red</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="red-orange">Red Orange</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="orange">Orange</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="yellow">Yellow</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="green">Green</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="teal">Teal</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="blue">Blue</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="purple">Purple</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="gray">Gray</rh-tag>
</dd>
<dt>Compact desaturated with icon and link</dt>
<dd>
<rh-tag size="compact" href="#" variant="desaturated" color="red" icon="information-fill">Red</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="green" icon="information-fill">Green</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Compact desaturated with slotted icon and link</dt>
<dd>
<rh-tag size="compact" href="#" variant="desaturated" color="red">Red <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="red-orange">Red Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="orange">Orange <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="yellow">Yellow <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="green">Green <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="teal" icon="information">Teal <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="blue" icon="information">Blue <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="purple" icon="information">Purple<svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
<rh-tag size="compact" href="#" variant="desaturated" color="gray icon=" information"="">Gray <svg slot="icon"><use href="#svg-icon"></use></svg></rh-tag>
</dd>
</dl>
</rh-context-demo>
<svg inert="" aria-hidden="true">
<defs>
<svg id="svg-icon" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img">
<path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
</svg>
</defs>
</svg>import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.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>
<dl>
<dt>Filled</dt>
<dd>
<Tag color="red">Red</Tag>
<Tag color="red-orange">Red Orange</Tag>
<Tag color="orange">Orange</Tag>
<Tag color="yellow">Yellow</Tag>
<Tag color="green">Green</Tag>
<Tag color="teal">Teal</Tag>
<Tag color="blue">Blue</Tag>
<Tag color="purple">Purple</Tag>
<Tag color="gray">Gray</Tag>
</dd>
<dt>Filled with icon</dt>
<dd>
<Tag color="red" icon="information-fill">Red</Tag>
<Tag color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag color="orange" icon="information-fill">Orange</Tag>
<Tag color="yellow" icon="information-fill">Yellow</Tag>
<Tag color="green" icon="information-fill">Green</Tag>
<Tag color="teal" icon="information-fill">Teal</Tag>
<Tag color="blue" icon="information-fill">Blue</Tag>
<Tag color="purple" icon="information-fill">Purple</Tag>
<Tag color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Filled with slotted icon</dt>
<dd>
<Tag color="red">
Red
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag color="red-orange">
Red Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag color="orange">
Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag color="yellow">
Yellow
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag color="green">
Green
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag color="teal" icon="information">
Teal
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag color="blue" icon="information">
Blue
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag color="purple" icon="information">
Purple
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag icon="information">
Gray
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
</dd>
<dt>Filled with link</dt>
<dd>
<Tag href="#" color="red">Red</Tag>
<Tag href="#" color="red-orange">Red Orange</Tag>
<Tag href="#" color="orange">Orange</Tag>
<Tag href="#" color="yellow">Yellow</Tag>
<Tag href="#" color="green">Green</Tag>
<Tag href="#" color="teal">Teal</Tag>
<Tag href="#" color="blue">Blue</Tag>
<Tag href="#" color="purple">Purple</Tag>
<Tag href="#" color="gray">Gray</Tag>
</dd>
<dt>Filled with icon and link</dt>
<dd>
<Tag href="#" color="red" icon="information-fill">Red</Tag>
<Tag href="#" color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag href="#" color="orange" icon="information-fill">Orange</Tag>
<Tag href="#" color="yellow" icon="information-fill">Yellow</Tag>
<Tag href="#" color="green" icon="information-fill">Green</Tag>
<Tag href="#" color="teal" icon="information-fill">Teal</Tag>
<Tag href="#" color="blue" icon="information-fill">Blue</Tag>
<Tag href="#" color="purple" icon="information-fill">Purple</Tag>
<Tag href="#" color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Filled with slotted icon and link</dt>
<dd>
<Tag href="#" color="red">
Red
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" color="red-orange">
Red Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" color="orange">
Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" color="yellow">
Yellow
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" color="green">
Green
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" color="teal" icon="information">
Teal
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" color="blue" icon="information">
Blue
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" color="purple" icon="information">
Purple
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" icon="information">
Gray
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
</dd>
<dt>Outline</dt>
<dd>
<Tag variant="outline" color="red">Red</Tag>
<Tag variant="outline" color="red-orange">Red Orange</Tag>
<Tag variant="outline" color="orange">Orange</Tag>
<Tag variant="outline" color="yellow">Yellow</Tag>
<Tag variant="outline" color="green">Green</Tag>
<Tag variant="outline" color="teal">Teal</Tag>
<Tag variant="outline" color="blue">Blue</Tag>
<Tag variant="outline" color="purple">Purple</Tag>
<Tag variant="outline" color="gray">Gray</Tag>
</dd>
<dt>Outlined with icon</dt>
<dd>
<Tag variant="outline" color="red" icon="information-fill">Red</Tag>
<Tag variant="outline" color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag variant="outline" color="orange" icon="information-fill">Orange</Tag>
<Tag variant="outline" color="yellow" icon="information-fill">Yellow</Tag>
<Tag variant="outline" color="green" icon="information-fill">Green</Tag>
<Tag variant="outline" color="teal" icon="information-fill">Teal</Tag>
<Tag variant="outline" color="blue" icon="information-fill">Blue</Tag>
<Tag variant="outline" color="purple" icon="information-fill">Purple</Tag>
<Tag variant="outline" color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Outlined with slotted icon</dt>
<dd>
<Tag variant="outline" color="red">
Red
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="outline" color="red-orange">
Red Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="outline" color="orange">
Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="outline" color="yellow">
Yellow
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="outline" color="green">
Green
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="outline" color="teal" icon="information">
Teal
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="outline" color="blue" icon="information">
Blue
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="outline" color="purple" icon="information">
Purple
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="outline" color="gray icon=" information">
Gray
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
</dd>
<dt>Outline with link</dt>
<dd>
<Tag href="#" variant="outline" color="red">Red</Tag>
<Tag href="#" variant="outline" color="red-orange">Red Orange</Tag>
<Tag href="#" variant="outline" color="orange">Orange</Tag>
<Tag href="#" variant="outline" color="yellow">Yellow</Tag>
<Tag href="#" variant="outline" color="green">Green</Tag>
<Tag href="#" variant="outline" color="teal">Teal</Tag>
<Tag href="#" variant="outline" color="blue">Blue</Tag>
<Tag href="#" variant="outline" color="purple">Purple</Tag>
<Tag href="#" variant="outline" color="gray">Gray</Tag>
</dd>
<dt>Outlined with icon and link</dt>
<dd>
<Tag href="#" variant="outline" color="red" icon="information-fill">Red</Tag>
<Tag href="#" variant="outline" color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag href="#" variant="outline" color="orange" icon="information-fill">Orange</Tag>
<Tag href="#" variant="outline" color="yellow" icon="information-fill">Yellow</Tag>
<Tag href="#" variant="outline" color="green" icon="information-fill">Green</Tag>
<Tag href="#" variant="outline" color="teal" icon="information-fill">Teal</Tag>
<Tag href="#" variant="outline" color="blue" icon="information-fill">Blue</Tag>
<Tag href="#" variant="outline" color="purple" icon="information-fill">Purple</Tag>
<Tag href="#" variant="outline" color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Outlined with slotted icon and link</dt>
<dd>
<Tag href="#" variant="outline" color="red">
Red
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="outline" color="red-orange">
Red Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="outline" color="orange">
Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="outline" color="yellow">
Yellow
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="outline" color="green">
Green
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="outline" color="teal" icon="information">
Teal
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="outline" color="blue" icon="information">
Blue
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="outline" color="purple" icon="information">
Purple
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="outline" color="gray icon=" information">
Gray
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
</dd>
<dt>Desaturated</dt>
<dd>
<Tag variant="desaturated" color="red">Red</Tag>
<Tag variant="desaturated" color="red-orange">Red Orange</Tag>
<Tag variant="desaturated" color="orange">Orange</Tag>
<Tag variant="desaturated" color="yellow">Yellow</Tag>
<Tag variant="desaturated" color="green">Green</Tag>
<Tag variant="desaturated" color="teal">Teal</Tag>
<Tag variant="desaturated" color="blue">Blue</Tag>
<Tag variant="desaturated" color="purple">Purple</Tag>
<Tag variant="desaturated" color="gray">Gray</Tag>
</dd>
<dt>Desaturated with icon</dt>
<dd>
<Tag variant="desaturated" color="red" icon="information-fill">Red</Tag>
<Tag variant="desaturated" color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag variant="desaturated" color="orange" icon="information-fill">Orange</Tag>
<Tag variant="desaturated" color="yellow" icon="information-fill">Yellow</Tag>
<Tag variant="desaturated" color="green" icon="information-fill">Green</Tag>
<Tag variant="desaturated" color="teal" icon="information-fill">Teal</Tag>
<Tag variant="desaturated" color="blue" icon="information-fill">Blue</Tag>
<Tag variant="desaturated" color="purple" icon="information-fill">Purple</Tag>
<Tag variant="desaturated" color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Desaturated with slotted icon</dt>
<dd>
<Tag variant="desaturated" color="red">
Red
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="desaturated" color="red-orange">
Red Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="desaturated" color="orange">
Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="desaturated" color="yellow">
Yellow
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="desaturated" color="green">
Green
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="desaturated" color="teal" icon="information">
Teal
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="desaturated" color="blue" icon="information">
Blue
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="desaturated" color="purple" icon="information">
Purple
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag variant="desaturated" color="gray icon=" information">
Gray
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
</dd>
<dt>Desaturated with link</dt>
<dd>
<Tag href="#" variant="desaturated" color="red">Red</Tag>
<Tag href="#" variant="desaturated" color="red-orange">Red Orange</Tag>
<Tag href="#" variant="desaturated" color="orange">Orange</Tag>
<Tag href="#" variant="desaturated" color="yellow">Yellow</Tag>
<Tag href="#" variant="desaturated" color="green">Green</Tag>
<Tag href="#" variant="desaturated" color="teal">Teal</Tag>
<Tag href="#" variant="desaturated" color="blue">Blue</Tag>
<Tag href="#" variant="desaturated" color="purple">Purple</Tag>
<Tag href="#" variant="desaturated" color="gray">Gray</Tag>
</dd>
<dt>Desaturated with icon and link</dt>
<dd>
<Tag href="#" variant="desaturated" color="red" icon="information-fill">Red</Tag>
<Tag href="#" variant="desaturated" color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag href="#" variant="desaturated" color="orange" icon="information-fill">Orange</Tag>
<Tag href="#" variant="desaturated" color="yellow" icon="information-fill">Yellow</Tag>
<Tag href="#" variant="desaturated" color="green" icon="information-fill">Green</Tag>
<Tag href="#" variant="desaturated" color="teal" icon="information-fill">Teal</Tag>
<Tag href="#" variant="desaturated" color="blue" icon="information-fill">Blue</Tag>
<Tag href="#" variant="desaturated" color="purple" icon="information-fill">Purple</Tag>
<Tag href="#" variant="desaturated" color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Desaturated with slotted icon and link</dt>
<dd>
<Tag href="#" variant="desaturated" color="red">
Red
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="desaturated" color="red-orange">
Red Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="desaturated" color="orange">
Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="desaturated" color="yellow">
Yellow
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="desaturated" color="green">
Green
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="desaturated" color="teal" icon="information">
Teal
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="desaturated" color="blue" icon="information">
Blue
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="desaturated" color="purple" icon="information">
Purple
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag href="#" variant="desaturated" color="gray icon=" information">
Gray
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
</dd>
<dt>Compact filled</dt>
<dd>
<Tag size="compact" color="red">Red</Tag>
<Tag size="compact" color="red-orange">Red Orange</Tag>
<Tag size="compact" color="orange">Orange</Tag>
<Tag size="compact" color="yellow">Yellow</Tag>
<Tag size="compact" color="green">Green</Tag>
<Tag size="compact" color="teal">Teal</Tag>
<Tag size="compact" color="blue">Blue</Tag>
<Tag size="compact" color="purple">Purple</Tag>
<Tag size="compact" color="gray">Gray</Tag>
</dd>
<dt>Compact filled with icon</dt>
<dd>
<Tag size="compact" color="red" icon="information-fill">Red</Tag>
<Tag size="compact" color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag size="compact" color="orange" icon="information-fill">Orange</Tag>
<Tag size="compact" color="yellow" icon="information-fill">Yellow</Tag>
<Tag size="compact" color="green" icon="information-fill">Green</Tag>
<Tag size="compact" color="teal" icon="information-fill">Teal</Tag>
<Tag size="compact" color="blue" icon="information-fill">Blue</Tag>
<Tag size="compact" color="purple" icon="information-fill">Purple</Tag>
<Tag size="compact" color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Compact filled with slotted icon</dt>
<dd>
<Tag size="compact" color="red">
Red
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" color="red-orange">
Red Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" color="orange">
Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" color="yellow">
Yellow
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" color="green">
Green
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" color="teal" icon="information">
Teal
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" color="blue" icon="information">
Blue
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" color="purple" icon="information">
Purple
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" icon="information">
Gray
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
</dd>
<dt>Compact filled with link</dt>
<dd>
<Tag size="compact" href="#" color="red">Red</Tag>
<Tag size="compact" href="#" color="red-orange">Red Orange</Tag>
<Tag size="compact" href="#" color="orange">Orange</Tag>
<Tag size="compact" href="#" color="yellow">Yellow</Tag>
<Tag size="compact" href="#" color="green">Green</Tag>
<Tag size="compact" href="#" color="teal">Teal</Tag>
<Tag size="compact" href="#" color="blue">Blue</Tag>
<Tag size="compact" href="#" color="purple">Purple</Tag>
<Tag size="compact" href="#" color="gray">Gray</Tag>
</dd>
<dt>Compact filled with icon and link</dt>
<dd>
<Tag size="compact" href="#" color="red" icon="information-fill">Red</Tag>
<Tag size="compact" href="#" color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag size="compact" href="#" color="orange" icon="information-fill">Orange</Tag>
<Tag size="compact" href="#" color="yellow" icon="information-fill">Yellow</Tag>
<Tag size="compact" href="#" color="green" icon="information-fill">Green</Tag>
<Tag size="compact" href="#" color="teal" icon="information-fill">Teal</Tag>
<Tag size="compact" href="#" color="blue" icon="information-fill">Blue</Tag>
<Tag size="compact" href="#" color="purple" icon="information-fill">Purple</Tag>
<Tag size="compact" href="#" color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Compact filled with slotted icon and link</dt>
<dd>
<Tag size="compact" href="#" color="red">
Red
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" color="red-orange">
Red Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" color="orange">
Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" color="yellow">
Yellow
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" color="green">
Green
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" color="teal" icon="information">
Teal
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" color="blue" icon="information">
Blue
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" color="purple" icon="information">
Purple
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" icon="information">
Gray
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
</dd>
<dt>Compact outline</dt>
<dd>
<Tag size="compact" variant="outline" color="red">Red</Tag>
<Tag size="compact" variant="outline" color="red-orange">Red Orange</Tag>
<Tag size="compact" variant="outline" color="orange">Orange</Tag>
<Tag size="compact" variant="outline" color="yellow">Yellow</Tag>
<Tag size="compact" variant="outline" color="green">Green</Tag>
<Tag size="compact" variant="outline" color="teal">Teal</Tag>
<Tag size="compact" variant="outline" color="blue">Blue</Tag>
<Tag size="compact" variant="outline" color="purple">Purple</Tag>
<Tag size="compact" variant="outline" color="gray">Gray</Tag>
</dd>
<dt>Compact outlined with icon</dt>
<dd>
<Tag size="compact" variant="outline" color="red" icon="information-fill">Red</Tag>
<Tag size="compact" variant="outline" color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag size="compact" variant="outline" color="orange" icon="information-fill">Orange</Tag>
<Tag size="compact" variant="outline" color="yellow" icon="information-fill">Yellow</Tag>
<Tag size="compact" variant="outline" color="green" icon="information-fill">Green</Tag>
<Tag size="compact" variant="outline" color="teal" icon="information-fill">Teal</Tag>
<Tag size="compact" variant="outline" color="blue" icon="information-fill">Blue</Tag>
<Tag size="compact" variant="outline" color="purple" icon="information-fill">Purple</Tag>
<Tag size="compact" variant="outline" color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Compact outlined with slotted icon</dt>
<dd>
<Tag size="compact" variant="outline" color="red">
Red
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="outline" color="red-orange">
Red Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="outline" color="orange">
Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="outline" color="yellow">
Yellow
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="outline" color="green">
Green
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="outline" color="teal" icon="information">
Teal
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="outline" color="blue" icon="information">
Blue
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="outline" color="purple" icon="information">
Purple
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="outline" color="gray icon=" information">
Gray
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
</dd>
<dt>Compact outline with link</dt>
<dd>
<Tag size="compact" href="#" variant="outline" color="red">Red</Tag>
<Tag size="compact" href="#" variant="outline" color="red-orange">Red Orange</Tag>
<Tag size="compact" href="#" variant="outline" color="orange">Orange</Tag>
<Tag size="compact" href="#" variant="outline" color="yellow">Yellow</Tag>
<Tag size="compact" href="#" variant="outline" color="green">Green</Tag>
<Tag size="compact" href="#" variant="outline" color="teal">Teal</Tag>
<Tag size="compact" href="#" variant="outline" color="blue">Blue</Tag>
<Tag size="compact" href="#" variant="outline" color="purple">Purple</Tag>
<Tag size="compact" href="#" variant="outline" color="gray">Gray</Tag>
</dd>
<dt>Compact outlined with icon and link</dt>
<dd>
<Tag size="compact" href="#" variant="outline" color="red" icon="information-fill">Red</Tag>
<Tag size="compact" href="#" variant="outline" color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag size="compact" href="#" variant="outline" color="orange" icon="information-fill">Orange</Tag>
<Tag size="compact" href="#" variant="outline" color="yellow" icon="information-fill">Yellow</Tag>
<Tag size="compact" href="#" variant="outline" color="green" icon="information-fill">Green</Tag>
<Tag size="compact" href="#" variant="outline" color="teal" icon="information-fill">Teal</Tag>
<Tag size="compact" href="#" variant="outline" color="blue" icon="information-fill">Blue</Tag>
<Tag size="compact" href="#" variant="outline" color="purple" icon="information-fill">Purple</Tag>
<Tag size="compact" href="#" variant="outline" color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Compact outlined with slotted icon and link</dt>
<dd>
<Tag size="compact" href="#" variant="outline" color="red">
Red
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="outline" color="red-orange">
Red Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="outline" color="orange">
Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="outline" color="yellow">
Yellow
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="outline" color="green">
Green
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="outline" color="teal" icon="information">
Teal
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="outline" color="blue" icon="information">
Blue
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="outline" color="purple" icon="information">
Purple
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="outline" color="gray icon=" information">
Gray
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
</dd>
<dt>Compact desaturated</dt>
<dd>
<Tag size="compact" variant="desaturated" color="red">Red</Tag>
<Tag size="compact" variant="desaturated" color="red-orange">Red Orange</Tag>
<Tag size="compact" variant="desaturated" color="orange">Orange</Tag>
<Tag size="compact" variant="desaturated" color="yellow">Yellow</Tag>
<Tag size="compact" variant="desaturated" color="green">Green</Tag>
<Tag size="compact" variant="desaturated" color="teal">Teal</Tag>
<Tag size="compact" variant="desaturated" color="blue">Blue</Tag>
<Tag size="compact" variant="desaturated" color="purple">Purple</Tag>
<Tag size="compact" variant="desaturated" color="gray">Gray</Tag>
</dd>
<dt>Compact desaturated with icon</dt>
<dd>
<Tag size="compact" variant="desaturated" color="red" icon="information-fill">Red</Tag>
<Tag size="compact" variant="desaturated" color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag size="compact" variant="desaturated" color="orange" icon="information-fill">Orange</Tag>
<Tag size="compact" variant="desaturated" color="yellow" icon="information-fill">Yellow</Tag>
<Tag size="compact" variant="desaturated" color="green" icon="information-fill">Green</Tag>
<Tag size="compact" variant="desaturated" color="teal" icon="information-fill">Teal</Tag>
<Tag size="compact" variant="desaturated" color="blue" icon="information-fill">Blue</Tag>
<Tag size="compact" variant="desaturated" color="purple" icon="information-fill">Purple</Tag>
<Tag size="compact" variant="desaturated" color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Compact desaturated with slotted icon</dt>
<dd>
<Tag size="compact" variant="desaturated" color="red">
Red
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="desaturated" color="red-orange">
Red Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="desaturated" color="orange">
Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="desaturated" color="yellow">
Yellow
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="desaturated" color="green">
Green
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="desaturated" color="teal" icon="information">
Teal
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="desaturated" color="blue" icon="information">
Blue
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="desaturated" color="purple" icon="information">
Purple
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" variant="desaturated" color="gray icon=" information">
Gray
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
</dd>
<dt>Compact desaturated with link</dt>
<dd>
<Tag size="compact" href="#" variant="desaturated" color="red">Red</Tag>
<Tag size="compact" href="#" variant="desaturated" color="red-orange">Red Orange</Tag>
<Tag size="compact" href="#" variant="desaturated" color="orange">Orange</Tag>
<Tag size="compact" href="#" variant="desaturated" color="yellow">Yellow</Tag>
<Tag size="compact" href="#" variant="desaturated" color="green">Green</Tag>
<Tag size="compact" href="#" variant="desaturated" color="teal">Teal</Tag>
<Tag size="compact" href="#" variant="desaturated" color="blue">Blue</Tag>
<Tag size="compact" href="#" variant="desaturated" color="purple">Purple</Tag>
<Tag size="compact" href="#" variant="desaturated" color="gray">Gray</Tag>
</dd>
<dt>Compact desaturated with icon and link</dt>
<dd>
<Tag size="compact" href="#" variant="desaturated" color="red" icon="information-fill">Red</Tag>
<Tag size="compact" href="#" variant="desaturated" color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag size="compact" href="#" variant="desaturated" color="orange" icon="information-fill">Orange</Tag>
<Tag size="compact" href="#" variant="desaturated" color="yellow" icon="information-fill">Yellow</Tag>
<Tag size="compact" href="#" variant="desaturated" color="green" icon="information-fill">Green</Tag>
<Tag size="compact" href="#" variant="desaturated" color="teal" icon="information-fill">Teal</Tag>
<Tag size="compact" href="#" variant="desaturated" color="blue" icon="information-fill">Blue</Tag>
<Tag size="compact" href="#" variant="desaturated" color="purple" icon="information-fill">Purple</Tag>
<Tag size="compact" href="#" variant="desaturated" color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Compact desaturated with slotted icon and link</dt>
<dd>
<Tag size="compact" href="#" variant="desaturated" color="red">
Red
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="desaturated" color="red-orange">
Red Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="desaturated" color="orange">
Orange
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="desaturated" color="yellow">
Yellow
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="desaturated" color="green">
Green
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="desaturated" color="teal" icon="information">
Teal
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="desaturated" color="blue" icon="information">
Blue
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="desaturated" color="purple" icon="information">
Purple
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
<Tag size="compact" href="#" variant="desaturated" color="gray icon=" information">
Gray
<svg slot="icon">
<use href="#svg-icon" />
</svg>
</Tag>
</dd>
</dl>
</rh-context-demo>
<svg inert aria-hidden="true">
<defs>
<svg id="svg-icon" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img">
<path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" />
</svg>
</defs>
</svg>
);Colors
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';<rh-tag color="red">Red</rh-tag>
<rh-tag color="orange">Orange</rh-tag>
<rh-tag color="green">Green</rh-tag>
<rh-tag color="cyan">Cyan</rh-tag>
<rh-tag color="blue">Blue</rh-tag>
<rh-tag color="purple">Purple</rh-tag>
<rh-tag>Gray</rh-tag>import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tag color="red">Red</Tag>
<Tag color="orange">Orange</Tag>
<Tag color="green">Green</Tag>
<Tag color="cyan">Cyan</Tag>
<Tag color="blue">Blue</Tag>
<Tag color="purple">Purple</Tag>
<Tag>Gray</Tag>
);Desaturated With Icon
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';<rh-tag variant="desaturated" icon="information-fill" color="red">Red</rh-tag>
<rh-tag variant="desaturated" icon="information-fill" color="orange">Orange</rh-tag>
<rh-tag variant="desaturated" icon="information-fill" color="green">Green</rh-tag>
<rh-tag variant="desaturated" icon="information-fill" color="cyan">Cyan</rh-tag>
<rh-tag variant="desaturated" icon="information-fill" color="blue">Blue</rh-tag>
<rh-tag variant="desaturated" icon="information-fill" color="purple">Purple</rh-tag>
<rh-tag variant="desaturated" icon="information-fill" color="gray">Gray</rh-tag>import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tag variant="desaturated" icon="information-fill" color="red">Red</Tag>
<Tag variant="desaturated" icon="information-fill" color="orange">Orange</Tag>
<Tag variant="desaturated" icon="information-fill" color="green">Green</Tag>
<Tag variant="desaturated" icon="information-fill" color="cyan">Cyan</Tag>
<Tag variant="desaturated" icon="information-fill" color="blue">Blue</Tag>
<Tag variant="desaturated" icon="information-fill" color="purple">Purple</Tag>
<Tag variant="desaturated" icon="information-fill" color="gray">Gray</Tag>
);Desaturated
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';<rh-tag variant="desaturated" color="red">Red</rh-tag>
<rh-tag variant="desaturated" color="orange">Orange</rh-tag>
<rh-tag variant="desaturated" color="green">Green</rh-tag>
<rh-tag variant="desaturated" color="cyan">Cyan</rh-tag>
<rh-tag variant="desaturated" color="blue">Blue</rh-tag>
<rh-tag variant="desaturated" color="purple">Purple</rh-tag>
<rh-tag variant="desaturated" color="gray">Gray</rh-tag>import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tag variant="desaturated" color="red">Red</Tag>
<Tag variant="desaturated" color="orange">Orange</Tag>
<Tag variant="desaturated" color="green">Green</Tag>
<Tag variant="desaturated" color="cyan">Cyan</Tag>
<Tag variant="desaturated" color="blue">Blue</Tag>
<Tag variant="desaturated" color="purple">Purple</Tag>
<Tag variant="desaturated" color="gray">Gray</Tag>
);Filled Color With Icon
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';<rh-tag icon="information-fill" color="red">Red</rh-tag>
<rh-tag icon="information-fill" color="red-orange">Red Orange</rh-tag>
<rh-tag icon="information-fill" color="orange">Orange</rh-tag>
<rh-tag icon="information-fill" color="yellow">Yellow</rh-tag>
<rh-tag icon="information-fill" color="green">Green</rh-tag>
<rh-tag icon="information-fill" color="teal">Teal</rh-tag>
<rh-tag icon="information-fill" color="blue">Blue</rh-tag>
<rh-tag icon="information-fill" color="purple">Purple</rh-tag>
<rh-tag icon="information-fill" color="gray">Gray</rh-tag>import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tag icon="information-fill" color="red">Red</Tag>
<Tag icon="information-fill" color="red-orange">Red Orange</Tag>
<Tag icon="information-fill" color="orange">Orange</Tag>
<Tag icon="information-fill" color="yellow">Yellow</Tag>
<Tag icon="information-fill" color="green">Green</Tag>
<Tag icon="information-fill" color="teal">Teal</Tag>
<Tag icon="information-fill" color="blue">Blue</Tag>
<Tag icon="information-fill" color="purple">Purple</Tag>
<Tag icon="information-fill" color="gray">Gray</Tag>
);Filled Color With Slotted Icon
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';<rh-tag color="red">Red<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag color="red-orange">Red Orange<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag color="orange">Orange<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag color="yellow">Yellow<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag color="green">Green<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag color="teal">Teal<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag color="blue">Blue<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag color="purple">Purple<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag color="gray">Gray<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<svg aria-hidden="true" hidden="" inert="">
<defs>
<svg id="slotted-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M17,8a9,9,0,1,0,9,9A9,9,0,0,0,17,8Zm0,3.992a1.524,1.524,0,1,1-1.524,1.524A1.524,1.524,0,0,1,17,11.992Zm2.032,9.218a.436.436,0,0,1-.435.435H15.4a.436.436,0,0,1-.435-.435v-.871A.436.436,0,0,1,15.4,19.9h.435V17.581H15.4a.436.436,0,0,1-.435-.435v-.871a.436.436,0,0,1,.435-.435h2.323a.436.436,0,0,1,.435.435V19.9H18.6a.436.436,0,0,1,.435.435Z" transform="translate(-5 -5)"></path>
</svg>
</defs>
</svg>import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tag color="red">
Red
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag color="red-orange">
Red Orange
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag color="orange">
Orange
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag color="yellow">
Yellow
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag color="green">
Green
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag color="teal">
Teal
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag color="blue">
Blue
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag color="purple">
Purple
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag color="gray">
Gray
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<svg aria-hidden="true" hidden inert>
<defs>
<svg id="slotted-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M17,8a9,9,0,1,0,9,9A9,9,0,0,0,17,8Zm0,3.992a1.524,1.524,0,1,1-1.524,1.524A1.524,1.524,0,0,1,17,11.992Zm2.032,9.218a.436.436,0,0,1-.435.435H15.4a.436.436,0,0,1-.435-.435v-.871A.436.436,0,0,1,15.4,19.9h.435V17.581H15.4a.436.436,0,0,1-.435-.435v-.871a.436.436,0,0,1,.435-.435h2.323a.436.436,0,0,1,.435.435V19.9H18.6a.436.436,0,0,1,.435.435Z" transform="translate(-5 -5)" />
</svg>
</defs>
</svg>
);Filled Color
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';<rh-tag color="red">Red</rh-tag>
<rh-tag color="red-orange">Red Orange</rh-tag>
<rh-tag color="orange">Orange</rh-tag>
<rh-tag color="yellow">Yellow</rh-tag>
<rh-tag color="green">Green</rh-tag>
<rh-tag color="teal">Teal</rh-tag>
<rh-tag color="blue">Blue</rh-tag>
<rh-tag color="purple">Purple</rh-tag>
<rh-tag color="gray">Gray</rh-tag>import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tag color="red">Red</Tag>
<Tag color="red-orange">Red Orange</Tag>
<Tag color="orange">Orange</Tag>
<Tag color="yellow">Yellow</Tag>
<Tag color="green">Green</Tag>
<Tag color="teal">Teal</Tag>
<Tag color="blue">Blue</Tag>
<Tag color="purple">Purple</Tag>
<Tag color="gray">Gray</Tag>
);Links
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';dl {
margin: 0;
display: grid;
gap: var(--rh-space-sm, 6px);
grid-template-columns: max-content 1fr;
}<dl>
<dt>Filled with link</dt>
<dd>
<rh-tag href="#" color="red">Red</rh-tag>
<rh-tag href="#" color="red-orange">Red Orange</rh-tag>
<rh-tag href="#" color="orange">Orange</rh-tag>
<rh-tag href="#" color="yellow">Yellow</rh-tag>
<rh-tag href="#" color="green">Green</rh-tag>
<rh-tag href="#" color="teal">Teal</rh-tag>
<rh-tag href="#" color="blue">Blue</rh-tag>
<rh-tag href="#" color="purple">Purple</rh-tag>
<rh-tag href="#" color="gray">Gray</rh-tag>
</dd>
<dt>Filled with icon and link</dt>
<dd>
<rh-tag href="#" color="red" icon="information-fill">Red</rh-tag>
<rh-tag href="#" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag href="#" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag href="#" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag href="#" color="green" icon="information-fill">Green</rh-tag>
<rh-tag href="#" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag href="#" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag href="#" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag href="#" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
<dt>Filled with link + disabled</dt>
<dd>
<rh-tag href="#" disabled="" color="red">Red</rh-tag>
<rh-tag href="#" disabled="" color="red-orange">Red Orange</rh-tag>
<rh-tag href="#" disabled="" color="orange">Orange</rh-tag>
<rh-tag href="#" disabled="" color="yellow">Yellow</rh-tag>
<rh-tag href="#" disabled="" color="green">Green</rh-tag>
<rh-tag href="#" disabled="" color="teal">Teal</rh-tag>
<rh-tag href="#" disabled="" color="blue">Blue</rh-tag>
<rh-tag href="#" disabled="" color="purple">Purple</rh-tag>
<rh-tag href="#" disabled="" color="gray">Gray</rh-tag>
</dd>
<dt>Filled with icon and link + disabled</dt>
<dd>
<rh-tag href="#" disabled="" color="red" icon="information-fill">Red</rh-tag>
<rh-tag href="#" disabled="" color="red-orange" icon="information-fill">Red Orange</rh-tag>
<rh-tag href="#" disabled="" color="orange" icon="information-fill">Orange</rh-tag>
<rh-tag href="#" disabled="" color="yellow" icon="information-fill">Yellow</rh-tag>
<rh-tag href="#" disabled="" color="green" icon="information-fill">Green</rh-tag>
<rh-tag href="#" disabled="" color="teal" icon="information-fill">Teal</rh-tag>
<rh-tag href="#" disabled="" color="blue" icon="information-fill">Blue</rh-tag>
<rh-tag href="#" disabled="" color="purple" icon="information-fill">Purple</rh-tag>
<rh-tag href="#" disabled="" color="gray" icon="information-fill">Gray</rh-tag>
</dd>
</dl>import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<dl>
<dt>Filled with link</dt>
<dd>
<Tag href="#" color="red">Red</Tag>
<Tag href="#" color="red-orange">Red Orange</Tag>
<Tag href="#" color="orange">Orange</Tag>
<Tag href="#" color="yellow">Yellow</Tag>
<Tag href="#" color="green">Green</Tag>
<Tag href="#" color="teal">Teal</Tag>
<Tag href="#" color="blue">Blue</Tag>
<Tag href="#" color="purple">Purple</Tag>
<Tag href="#" color="gray">Gray</Tag>
</dd>
<dt>Filled with icon and link</dt>
<dd>
<Tag href="#" color="red" icon="information-fill">Red</Tag>
<Tag href="#" color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag href="#" color="orange" icon="information-fill">Orange</Tag>
<Tag href="#" color="yellow" icon="information-fill">Yellow</Tag>
<Tag href="#" color="green" icon="information-fill">Green</Tag>
<Tag href="#" color="teal" icon="information-fill">Teal</Tag>
<Tag href="#" color="blue" icon="information-fill">Blue</Tag>
<Tag href="#" color="purple" icon="information-fill">Purple</Tag>
<Tag href="#" color="gray" icon="information-fill">Gray</Tag>
</dd>
<dt>Filled with link + disabled</dt>
<dd>
<Tag href="#" disabled color="red">Red</Tag>
<Tag href="#" disabled color="red-orange">Red Orange</Tag>
<Tag href="#" disabled color="orange">Orange</Tag>
<Tag href="#" disabled color="yellow">Yellow</Tag>
<Tag href="#" disabled color="green">Green</Tag>
<Tag href="#" disabled color="teal">Teal</Tag>
<Tag href="#" disabled color="blue">Blue</Tag>
<Tag href="#" disabled color="purple">Purple</Tag>
<Tag href="#" disabled color="gray">Gray</Tag>
</dd>
<dt>Filled with icon and link + disabled</dt>
<dd>
<Tag href="#" disabled color="red" icon="information-fill">Red</Tag>
<Tag href="#" disabled color="red-orange" icon="information-fill">Red Orange</Tag>
<Tag href="#" disabled color="orange" icon="information-fill">Orange</Tag>
<Tag href="#" disabled color="yellow" icon="information-fill">Yellow</Tag>
<Tag href="#" disabled color="green" icon="information-fill">Green</Tag>
<Tag href="#" disabled color="teal" icon="information-fill">Teal</Tag>
<Tag href="#" disabled color="blue" icon="information-fill">Blue</Tag>
<Tag href="#" disabled color="purple" icon="information-fill">Purple</Tag>
<Tag href="#" disabled color="gray" icon="information-fill">Gray</Tag>
</dd>
</dl>
);Outline With Icon
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';<rh-tag variant="outline" icon="information-fill" color="red">Red</rh-tag>
<rh-tag variant="outline" icon="information-fill" color="orange">Orange</rh-tag>
<rh-tag variant="outline" icon="information-fill" color="green">Green</rh-tag>
<rh-tag variant="outline" icon="information-fill" color="cyan">Cyan</rh-tag>
<rh-tag variant="outline" icon="information-fill" color="blue">Blue</rh-tag>
<rh-tag variant="outline" icon="information-fill" color="purple">Purple</rh-tag>
<rh-tag variant="outline" icon="information-fill" color="gray">Gray</rh-tag>import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tag variant="outline" icon="information-fill" color="red">Red</Tag>
<Tag variant="outline" icon="information-fill" color="orange">Orange</Tag>
<Tag variant="outline" icon="information-fill" color="green">Green</Tag>
<Tag variant="outline" icon="information-fill" color="cyan">Cyan</Tag>
<Tag variant="outline" icon="information-fill" color="blue">Blue</Tag>
<Tag variant="outline" icon="information-fill" color="purple">Purple</Tag>
<Tag variant="outline" icon="information-fill" color="gray">Gray</Tag>
);Outline With Slotted Icon
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';<rh-tag variant="outline" color="red">Red<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="red-orange">Red Orange<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="orange">Orange<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="yellow">Yellow<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="green">Green<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="teal">Teal<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="blue">Blue<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="purple">Purple<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<rh-tag variant="outline" color="gray">Gray<svg slot="icon"><use href="#slotted-icon"></use></svg></rh-tag>
<svg aria-hidden="true" hidden="" inert="">
<defs>
<svg id="slotted-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M17,8a9,9,0,1,0,9,9A9,9,0,0,0,17,8Zm0,3.992a1.524,1.524,0,1,1-1.524,1.524A1.524,1.524,0,0,1,17,11.992Zm2.032,9.218a.436.436,0,0,1-.435.435H15.4a.436.436,0,0,1-.435-.435v-.871A.436.436,0,0,1,15.4,19.9h.435V17.581H15.4a.436.436,0,0,1-.435-.435v-.871a.436.436,0,0,1,.435-.435h2.323a.436.436,0,0,1,.435.435V19.9H18.6a.436.436,0,0,1,.435.435Z" transform="translate(-5 -5)"></path>
</svg>
</defs>
</svg>import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tag variant="outline" color="red">
Red
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag variant="outline" color="red-orange">
Red Orange
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag variant="outline" color="orange">
Orange
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag variant="outline" color="yellow">
Yellow
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag variant="outline" color="green">
Green
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag variant="outline" color="teal">
Teal
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag variant="outline" color="blue">
Blue
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag variant="outline" color="purple">
Purple
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<Tag variant="outline" color="gray">
Gray
<svg slot="icon">
<use href="#slotted-icon" />
</svg>
</Tag>
<svg aria-hidden="true" hidden inert>
<defs>
<svg id="slotted-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M17,8a9,9,0,1,0,9,9A9,9,0,0,0,17,8Zm0,3.992a1.524,1.524,0,1,1-1.524,1.524A1.524,1.524,0,0,1,17,11.992Zm2.032,9.218a.436.436,0,0,1-.435.435H15.4a.436.436,0,0,1-.435-.435v-.871A.436.436,0,0,1,15.4,19.9h.435V17.581H15.4a.436.436,0,0,1-.435-.435v-.871a.436.436,0,0,1,.435-.435h2.323a.436.436,0,0,1,.435.435V19.9H18.6a.436.436,0,0,1,.435.435Z" transform="translate(-5 -5)" />
</svg>
</defs>
</svg>
);Outline
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';<rh-tag variant="outline" color="red">Red</rh-tag>
<rh-tag variant="outline" color="orange">Orange</rh-tag>
<rh-tag variant="outline" color="green">Green</rh-tag>
<rh-tag variant="outline" color="cyan">Cyan</rh-tag>
<rh-tag variant="outline" color="blue">Blue</rh-tag>
<rh-tag variant="outline" color="purple">Purple</rh-tag>
<rh-tag variant="outline" color="gray">Gray</rh-tag>import { Tag } from "@rhds/elements/react/rh-tag/rh-tag.js";
// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.
export const Demo = () => (
<Tag variant="outline" color="red">Red</Tag>
<Tag variant="outline" color="orange">Orange</Tag>
<Tag variant="outline" color="green">Green</Tag>
<Tag variant="outline" color="cyan">Cyan</Tag>
<Tag variant="outline" color="blue">Blue</Tag>
<Tag variant="outline" color="purple">Purple</Tag>
<Tag variant="outline" color="gray">Gray</Tag>
);Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
