Tag
Tag in a button
You can use tag within the <button> HTML element to make it trigger an action, like revealing a popover.
Copy to Clipboard
Copied!
Toggle line wrap
<button>
<rh-tag color="purple" ssr-hint-has-slotted-default="">Purple</rh-tag>
</button>
<button>
<rh-tag color="purple" variant="outline" ssr-hint-has-slotted-default="">Purple</rh-tag>
</button>
<button>
<rh-tag color="purple" icon="information-fill" ssr-hint-has-slotted-default="">Purple</rh-tag>
</button>
<button>
<rh-tag color="purple" size="compact" ssr-hint-has-slotted-default="">Purple</rh-tag>
</button>
Copy to Clipboard
Copied!
Toggle line wrap
button:has(rh-tag) {
cursor: pointer;
position: relative;
align-items: center;
background-color: transparent;
border: 0;
border-radius: var(--rh-border-radius-pill, 64px);
padding: 0;
&:focus-visible {
outline-width: var(--rh-border-width-md, 2px);
outline-style: solid;
outline-color: var(--rh-color-interactive-primary-default);
outline-offset: var(--rh-length-3xs, 2px);
--rh-border-width-sm: var(--rh-border-width-md, 2px);
}
&:hover {
--rh-border-width-sm: var(--rh-border-width-md, 2px);
}
}
Copy to Clipboard
Copied!
Toggle line wrap
import '@rhds/elements/rh-tag/rh-tag.js';
Interaction states
Hover
If a tag is being used as a button, the border width changes to --rh-border-width-md on hover.
Focus and active
A focus ring wraps around the text and icon in both focus and active states. Hover state styles are retained.
