Tag — ARC UI

Components

Tag

data

hybrid

<arc-tag>

Overview

Guidelines

When to use

Use the `primary` or `secondary` variant to visually group related categories together
Use the `color` prop when category colours come from data (e.g. project colours, label colours)
Enable `removable` when the tag represents a user-applied filter that can be cleared
Keep tag labels to 1-3 words -- the uppercase styling amplifies length visually
Listen to `arc-remove` on the parent container using event delegation for efficient handling
Combine multiple tags in a flex-wrap container with a small gap for scannable filter displays

When not to use

Do not use Tag for long descriptive text -- it is designed for short categorical labels
Do not use the remove button for destructive actions (like deleting a resource) -- it should only remove the tag itself
Do not mix more than two colour variants in the same tag group -- it creates visual noise
Do not set `disabled` on removable tags without also disabling the action that applied them
Avoid using Tag as a button replacement -- it lacks the semantic role and focus handling of a button

Features

Six colour variants: default, primary, secondary, success, warning, and danger
Custom `color` prop accepting an RGB triplet for data-driven category colours
Pill shape with full border-radius and uppercase letter-spaced text for visual distinction
Optional remove button via `removable` prop, firing `arc-remove` on click
Hover glow effect on coloured variants and custom colours using matching box-shadow
Default slot for label content, supporting text, icons, or mixed content
Disabled state at 50% opacity with pointer events blocked on the entire tag
Focus-visible ring on the remove button for keyboard accessibility
CSS parts `tag`, `label`, and `remove` for targeted external styling

Preview

Default

Primary

Secondary

Success

Warning

Danger

Custom

Removable

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<arc-tag>Default</arc-tag>
<arc-tag variant="primary">Primary</arc-tag>
<arc-tag variant="secondary">Secondary</arc-tag>
<arc-tag removable>Removable</arc-tag>

<!-- Custom colour from data -->
<arc-tag color="255, 120, 50">Custom</arc-tag>
<arc-tag color="120, 200, 80">Green</arc-tag>

import { Tag } from '@arclux/arc-ui-react';

<Tag>Default</Tag>
<Tag variant="primary">Primary</Tag>
<Tag variant="secondary">Secondary</Tag>
<Tag removable>Removable</Tag>

{/* Custom colour from data */}
<Tag color="255, 120, 50">Custom</Tag>
<Tag color="120, 200, 80">Green</Tag>

<script setup>
import { Tag } from '@arclux/arc-ui-vue';
</script>

<template>
  <Tag>Default</Tag>
  <Tag variant="primary">Primary</Tag>
  <Tag variant="secondary">Secondary</Tag>
  <Tag removable>Removable</Tag>
  <Tag color="255, 120, 50">Custom</Tag>
</template>

<script>
  import { Tag } from '@arclux/arc-ui-svelte';
</script>

<Tag>Default</Tag>
<Tag variant="primary">Primary</Tag>
<Tag variant="secondary">Secondary</Tag>
<Tag removable>Removable</Tag>
<Tag color="255, 120, 50">Custom</Tag>

import { Component } from '@angular/core';
import { Tag } from '@arclux/arc-ui-angular';

@Component({
  imports: [Tag],
  template: `
    <Tag>Default</Tag>
    <Tag variant="primary">Primary</Tag>
    <Tag variant="secondary">Secondary</Tag>
    <Tag removable>Removable</Tag>
    <Tag color="255, 120, 50">Custom</Tag>
  `,
})
export class MyComponent {}

import { Tag } from '@arclux/arc-ui-solid';

<Tag>Default</Tag>
<Tag variant="primary">Primary</Tag>
<Tag variant="secondary">Secondary</Tag>
<Tag removable>Removable</Tag>
<Tag color="255, 120, 50">Custom</Tag>

import { Tag } from '@arclux/arc-ui-preact';

<Tag>Default</Tag>
<Tag variant="primary">Primary</Tag>
<Tag variant="secondary">Secondary</Tag>
<Tag removable>Removable</Tag>
<Tag color="255, 120, 50">Custom</Tag>

<arc-tag>Default</arc-tag>
<arc-tag variant="primary">Primary</arc-tag>
<arc-tag variant="secondary">Secondary</arc-tag>
<arc-tag removable>Removable</arc-tag>
<arc-tag color="255, 120, 50">Custom</arc-tag>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-tag — self-contained, no external CSS needed -->
<div class="arc-tag">

</div>

API

Prop	Type	Default	Description
`variant`	`'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'`	`'default'`	Colour variant. Default is neutral. Primary and secondary use accent tints. Success, warning, and danger provide semantic status colours.
`color`	`string`	—	Custom colour as an RGB triplet (e.g. `"77, 126, 247"`). When set, overrides the variant colours for border, text, background, and hover glow. Useful for data-driven category colours.
`size`	`string`	`'md'`	Controls the tag size. Options: 'sm', 'md', 'lg'.
`removable`	`boolean`	`false`	When true, shows a close button that fires `arc-remove` when clicked.
`disabled`	`boolean`	`false`	Disables the tag, reducing opacity to 40% and blocking pointer events including the remove button.

Events

Event	Description
`arc-remove`	Fired when the remove button on a removable tag is clicked