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. Seven color variants are available: `default` (neutral border and muted text), `primary` (accent-primary tint), `secondary` (accent-secondary tint), `success` (green), `warning` (yellow), `error` (red), and `info` (blue). The accent and status variants gain a colored glow on hover, which helps in interactive filtering where users need to tell active categories apart at a glance. `info` arrived in 4.2 from arc-badge, which had it when Tag did not. Every other status set in the library carries all four, and a badge migrating to a tag would otherwise have fallen through to `default`. 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. Uppercase styling makes length more noticeable
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

Seven color variants: default, primary, secondary, success, warning, error, and info
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

colorstring='': 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.
variant'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'='default': Color variant. Default is neutral. Primary and secondary use accent tints. Success, warning, error and info provide semantic status colors.
size'sm' | 'md' | 'lg'='md': Controls the tag size.
removableboolean=false: When true, shows a close button that fires arc-remove when clicked.
disabledboolean=false: Disables the tag, reducing opacity to 40% and blocking pointer events including the remove button.

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