data-display — wyrd.component.tag

Tag

Compact inline label that can optionally expose a localized dismiss affordance.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

catalog/contracts/tag.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: Tag  tag: wyrd-tag  package: wyrd.component.tag  title: Tag  summary: Compact inline label that can optionally expose a localized dismiss affordance.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: data-display  composition: single-slot  interactive: truetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: is-dismissible      type:        kind: boolean      required: false      default: false      reflects: true      serializable: true      summary: Shows a dismiss control that emits the dismiss event.  slots:    - name: content      content: true      required: true      cardinality: exactly-one      accepts:        - text      summary: Visible tag label read inline with surrounding content.  events:    - name: dismiss      payload:        action:          kind: action-ref      bubbles: true      composed: true      cancelable: true      summary: Canonical event emitted by the dismiss affordance.  states:    - name: default      source: platform      summary: Non-dismissible tag.    - name: dismissible      source: property      summary: Tag with visible dismiss affordance.  parts:    - name: root      summary: Styled tag root.      slots:        - content    - name: dismiss      summary: Dismiss control.  tokens:    background: color.surface-container    foreground: color.on-surface    radius: rounded.fullmessages:  - key: tag.dismiss    description: Accessible label for the dismiss control of a dismissible tag.obligations:  accessibility:    role: none    keyboard:      - Tab moves focus to the dismiss control when present.      - Enter or Space activates the dismiss control when focused.    semantics:      - The tag itself adds no standalone semantics.      - The dismiss control is a button named by the component-owned localized message.  behavior:    model: stateless    interactions:      - Activating the dismiss affordance emits dismiss.    hostEffects:      - Dispatch dismiss event.  conditions:    - rtl    - reduced-motion    - cvd-deuteranopia    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - is-dismissible    serializableSlots:      - content    eventBindings:      - dismiss    notes: Tag serializes its dismissible state, label text, and optional dismiss binding.examples:  - name: default    state: default    properties:      is-dismissible: false    slots:      content: Frontend  - name: dismissible    state: dismissible    properties:      is-dismissible: true    slots:      content: Priorityoverrides:  react:    slots:      content: content

Examples

Generated from the contract's examples block. Previews are the published @wyrd-company/react component, themed by the brand's role tokens — flip the site's light/dark toggle and they follow.

Code target React Flutter Applies to every example on component pages.

default state: default

Usage

import { WyrdTag } from "@wyrd-company/react";

<WyrdTag isDismissible={false} content="Frontend" />

// events: onDismiss

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdTag(
  isDismissible: false,
  child: Text('Frontend'),
)

// events: onDismiss

dismissible state: dismissible

Usage

import { WyrdTag } from "@wyrd-company/react";

<WyrdTag isDismissible content="Priority" />

// events: onDismiss

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdTag(
  isDismissible: true,
  child: Text('Priority'),
)

// events: onDismiss

Properties

Name	Type	Default	Summary
`is-dismissible`	`boolean`	`false`	Shows a dismiss control that emits the dismiss event.

Slots & events

Slot	Cardinality	Accepts	Summary
`content`	exactly-one	`text`	Visible tag label read inline with surrounding content.

Event	Payload	Summary
`dismiss`	`action`	Canonical event emitted by the dismiss affordance.

Tokens

The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.

Binding	Token
`background`	`color.surface-container`
`foreground`	`color.on-surface`
`radius`	`rounded.full`

States

State	Source	Summary
`default`	platform	Non-dismissible tag.
`dismissible`	property	Tag with visible dismiss affordance.

SDUI

Status: serializable. Tag serializes its dismissible state, label text, and optional dismiss binding.

Serializable	Members
Properties	`is-dismissible`
Slots	`content`
Events	`dismiss`

  The Wyrding Way — a contract-first design system. © Wyrd Company 
   Pipeline demo
 Choose an example to inspect its pipeline context.
 Explore the shape of a brand's pipeline input: presets and knobs regenerate the illustrative excerpt below — not a compilable DESIGN.md (see the format reference). Primary swatches update live; accent, shape, density, and ground are excerpt-only; error swatches are preset-derived until any edit switches to custom (TWW · Ink errors). Component previews use the published brand package and the site's light/dark toggle.
 
  Start from
       
 * homages — shown for range, not affiliation.
 
  Tokens
 Primary updates live swatches. Accent, shape, density, and ground appear in the excerpt only. Error swatches follow the preset until you edit a knob — then they reset to TWW · Ink.
  color.primary   #26221A    color.accent   #9C7C14    rounded.md   2px    density   1.0×    ground     
 
   DESIGN.md excerpt illustrative