Tag

Compact pill-shaped label with color variants, custom color support, and an optional remove button, for categorisation, filtering, and selection feedback.

Components

Tag

data

hybrid

<arc-tag>

Overview

Tag is a small, pill-shaped label component used to categorise, filter, or display metadata inline. It renders its content in uppercase with accent font styling and letter spacing, giving it a distinct visual weight that stands out against body text without overwhelming the layout. Tags are commonly seen in filter bars, resource cards, multi-select summaries, and anywhere compact labeling is needed. Six color variants are available: `default` (neutral border and muted text), `primary` (accent-primary tint), `secondary` (accent-secondary tint), `success` (green), `warning` (yellow), and `error` (red). The accent and status variants gain a colored glow on hover, making them effective for interactive filtering scenarios where the user needs to distinguish active categories at a glance. For cases where the built-in variants don't cover your color needs, the `color` prop accepts an RGB triplet (e.g. `"77, 126, 247"`) and applies it as the tag's border, text, background tint, and hover glow. This is useful for category-specific colors that come from data rather than design tokens. When the `removable` prop is set, a small close button appears after the label. Clicking it fires an `arc-remove` event, allowing the parent component to handle removal logic (e.g. removing a filter, un-selecting a value). The remove button has its own hover state and focus ring, ensuring it is independently accessible for keyboard users.

Guidelines

When to use

Use the `primary` or `secondary` variant to visually group related categories together
Use the `color` prop when category colors come from data (e.g. project colors, label colors)
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 color 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 color variants: default, primary, secondary, success, warning, and error
Custom `color` prop accepting an RGB triplet for data-driven category colors
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 colored variants and custom colors 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 color 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';

export default function Example() {
  return (
    <>
      <Tag>Default</Tag>
      <Tag variant="primary">Primary</Tag>
      <Tag variant="secondary">Secondary</Tag>
      <Tag removable>Removable</Tag>

      {/* Custom color 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: `
    <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>
  `,
})
export class MyComponent {}

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

export default function Example() {
  return (
    <>
      <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';

export default function Example() {
  return (
    <>
      <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

variant 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' ='default': Color variant. Default is neutral. Primary and secondary use accent tints. Success, warning, and error provide semantic status colors.
size 'sm' | 'md' | 'lg' ='md': Controls the tag size.
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.
color string ='': Custom color as an RGB triplet (e.g. `"77, 126, 247"`). When set, overrides the variant colors for border, text, background, and hover glow. Useful for data-driven category colors.

Events

arc-remove: Fired when the remove button on a removable tag is clicked

Tag

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight