Tag

Removable label with size variants, pill shape, and htmx delete support.

<rhx-tag>

Examples

Variants

Neutral Brand Success Warning Danger

<rhx-tag rhx-variant="neutral">Neutral</rhx-tag>
<rhx-tag rhx-variant="brand">Brand</rhx-tag>
<rhx-tag rhx-variant="success">Success</rhx-tag>
<rhx-tag rhx-variant="warning">Warning</rhx-tag>
<rhx-tag rhx-variant="danger">Danger</rhx-tag>

Sizes

Small Medium (default) Large

<rhx-tag rhx-variant="brand" rhx-size="small">Small</rhx-tag>
<rhx-tag rhx-variant="brand">Medium (default)</rhx-tag>
<rhx-tag rhx-variant="brand" rhx-size="large">Large</rhx-tag>

Pill Shape

C# TypeScript Rust

<rhx-tag rhx-variant="brand" rhx-pill="true">C#</rhx-tag>
<rhx-tag rhx-variant="success" rhx-pill="true">TypeScript</rhx-tag>
<rhx-tag rhx-variant="danger" rhx-pill="true">Rust</rhx-tag>

Removable

JavaScript Python Deprecated

<rhx-tag rhx-variant="brand" rhx-removable="true">JavaScript</rhx-tag>
<rhx-tag rhx-variant="success" rhx-removable="true">Python</rhx-tag>
<rhx-tag rhx-variant="danger" rhx-removable="true"
         rhx-pill="true">Deprecated</rhx-tag>

htmx Delete

htmx Tag

<rhx-tag rhx-variant="brand" rhx-removable="true"
         hx-delete="/Docs/Components/Tag?handler=RemoveTag&amp;id=1"
         hx-trigger="click from:find .rhx-tag__remove"
         hx-target="closest .rhx-tag"
         hx-swap="outerHTML swap:200ms">
    htmx Tag
</rhx-tag>

Properties

Property	Type	Default	Description
`rhx-variant`	`string`	`neutral`	Color variant: neutral, brand, success, warning, danger
`rhx-size`	`string`	`medium`	Tag size: small, medium, large
`rhx-pill`	`bool`	`false`	Renders with fully rounded corners
`rhx-removable`	`bool`	`false`	Shows a remove button

Tag