Display and feedback

Tag

Static or interactive content taxonomy label.

Live example

taxonomydesign systems

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Tag } from "@cofob/design-system-react";

/**
 * Complete Tag parameter reference.
 * @param tone
 *   type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
 *   default: "neutral"
 *   example: "success"
 * @param removable
 *   type: boolean
 *   default: false
 *   example: true
 * @param removeLabel
 *   type: string
 *   default: "Remove" (React) / "Remove tag" (Svelte)
 *   example: "Accessible label"
 * @param onRemove
 *   type: () => void
 *   default: —
 *   example: {handleRemove}
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param span attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function TagExample() {
  return (
    <Tag>Content</Tag>
  );
}

Svelte

<script lang="ts">
  import { Tag } from "@cofob/design-system-svelte";

  // Complete Tag parameter reference.
  // tone
  //   type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
  //   default: "neutral"
  //   example: "success"
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // removable
  //   type: boolean
  //   default: false
  //   example: true
  // removeLabel
  //   type: string
  //   default: "Remove" (React) / "Remove tag" (Svelte)
  //   example: "Accessible label"
  // onRemove
  //   type: () => void
  //   default: —
  //   example: {handleRemove}
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // span attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Tag>Content</Tag>

HTML

<!--
  Complete Tag parameter reference.
  tone
    type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
    default: "neutral"
    example: "success"
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  removable
    type: boolean
    default: false
    example: true
  removeLabel
    type: string
    default: "Remove" (React) / "Remove tag" (Svelte)
    example: "Accessible label"
  onRemove
    type: () => void
    default: —
    example: {handleRemove}
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  span attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<span class="cf-tag">design</span>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-tag`
Adapters	Native · React · Svelte
Primary props	tone · size · removable · removeLabel · onRemove · children · span attributes
Documented states	default · hover/focus where interactive · disabled where applicable
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`tone`	`"neutral" \| "accent" \| "info" \| "success" \| "warning" \| "danger"`	`"neutral"`	React · Svelte · HTML	`"success"`	Applies semantic color intent without hard-coded colors.
`size`	`"sm" \| "md" \| "lg" (plus heading sizes)`	`"md"`	Svelte · HTML	`"md"`	Applies a design-system size token.
`removable`	`boolean`	`false`	React · Svelte · HTML	`true`	Shows a remove action on a tag.
`removeLabel`	`string`	`"Remove" (React) / "Remove tag" (Svelte)`	React · Svelte · HTML	`"Accessible label"`	Accessible name for a remove action; FileUpload can derive it from each file.
`onRemove`	`() => void`	`—`	React · Svelte · HTML	`{handleRemove}`	Runs when the tag remove action is activated.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`span attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.