Tag
Tag in a button
You can use tag within the <button> HTML element to make it trigger an action, like revealing a popover.
<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>
<button>
test
</button>@import url('/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css');
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: 0;
}
&:hover rh-tag #container::before {
border-width: var(--rh-border-width-md, 2px);
}
}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.
