Tag

<caos-tag>

a free-form operational label, distinct from lifecycle state

May be placed on a record page, an app’s home page and a page inside an app.

Inputs

Name	Attribute	Description	Type	Default	Required
removable	removable, markup only	Show the dismiss control. Pressing it reports caos-tag-remove; taking the tag off the record is the host’s job, so set this only where something is listening.	boolean	false	Optional
error	error, markup only	Mark the label as wrong — an address that bounced, a value that no longer resolves. The edge and lettering turn the danger colour, a warning mark takes the avatar’s place, and “Error:” is read ahead of the label.	boolean	false	Optional

Events

Name	When it fires	What it carries
caos-tag-remove	The dismiss control is pressed. It bubbles and crosses the shadow boundary, so a list of tags can be listened to once at the container. The tag does NOT take itself off — it reports, and the host removes it once the record has been updated.	nothing — the tag that raised it is the event target, which is what a host listening at the container reads.

Slots

Name	What goes in it
the default slot	The label. Set in 10px tracked capitals, and it does not wrap.
avatar	A picture or an icon for what the label is — a person’s photo, a record’s mark. Drawn round at the label’s height, ahead of it; nothing is drawn, and no gap kept, when nothing is placed. Hidden while in error.

Styling hooks

Design token	What it controls
--caos-color-surface-2	The chip fill.
--caos-color-border	The 1px chip edge.
--caos-color-text-muted	The label lettering, and the dismiss glyph at rest.
--caos-color-danger	The dismiss glyph under the pointer, and the edge, lettering and mark of a tag in error.
--caos-radius	The chip corners — square, which is what tells a tag from a pill at a glance.
--caos-radius-sm	The corners of the dismiss control.
--caos-focus-ring	The ring on the dismiss control when it is reached by keyboard.
--caos-font-mono	The typeface the label is set in.
--caos-space-2	The gap between the label and the dismiss control.

Methods

Name	Description	Arguments
requestRemove()	Report that somebody asked to take this tag off, exactly as the dismiss control does: raises caos-tag-remove and returns whether it went unrefused. The tag still does not remove itself. A pill container calls it for Delete.	takes none

Readable state

Nothing on this piece can be read back.

Styling parts

Part	Which piece of it	When it is there
::part(tag)	the tag	Always
::part(remove)	the remove control	Always
::part(avatar)	the place the avatar is drawn	Always
::part(error)	the warning mark of a tag in error	Always

When to use it

Labels a person applied, where there may be none, one or several on the same record, and where the words come from the people using the system rather than from the object model.

What to use instead

• PillContainer — Several tags belong together as one set — the values of a multi-select, the filters applied to a list — and the row wants one tab stop, arrow keys between the tags, and a limit past which the rest wait.
• StatusPill — The word is the record’s LIFECYCLE STATE — Draft, In review, Approved — from the vocabulary the object defines, with exactly one true at any moment. That is the line: a pill is one value from a closed set and it changes as the record progresses; a tag is any number of values from an open set and it changes when somebody decides. Drawing a state as a tag throws away the tint that let a person read a list of fifty rows without stopping, and drawing a label as a pill means a colour now has two meanings and neither can be trusted.
• PicklistField — The person is CHOOSING the labels rather than reading them. Tags show what is on the record; a field is what puts it there.
• SegmentedFilter — The chips are controls that change what is listed rather than labels describing a record. A tag is not a control — the only thing pressable on it is the dismiss.
• ProvenanceMarker — The chip qualifies a single VALUE and says where it came from, rather than labelling the record as a whole.

Accessibility

The label is ordinary text and reads as part of the line it sits in — no role is set, because a tag is content rather than a control. The dismiss IS a real button: reachable by keyboard, activated by Enter or Space, with its own focus ring and an accessible name — except inside a pill container, where it leaves the tab order because the tag itself takes focus and Delete removes it. Left to the author: the name on that button is “Remove” for every tag, so a screen-reader user working down a row of five hears “Remove” five times with nothing to tell them apart — until the component takes the label into that name, a row of removable tags needs its own labelling around it. A tag in error carries the words “Error:” ahead of its label, so the state is never carried by the colour and the mark alone.

Examples

Labels on a record

The plain form: two operational labels somebody put on an account, reading as content.

{
  "id": "example",
  "section": "Labels on a record",
  "columns": 1,
  "items": [
    {
      "id": "tag_1",
      "type": "component",
      "key": "tag",
      "children": [
        "Rush"
      ]
    },
    {
      "id": "tag_2",
      "type": "component",
      "key": "tag",
      "children": [
        "Repeat customer"
      ]
    },
    {
      "id": "tag_3",
      "type": "component",
      "key": "tag",
      "children": [
        "Site visit needed"
      ]
    }
  ]
}

<caos-tag>Rush</caos-tag>
<caos-tag>Repeat customer</caos-tag>
<caos-tag>Site visit needed</caos-tag>

Removable

The dismiss control, wired the way a real page wires it — the tag reports the press and the page takes it off, which is why it actually disappears here instead of doing nothing.

The page around it: The surrounding page takes the tag off the record when it reports the press — the tag only reports it, and never removes itself.

{
  "id": "example",
  "section": "Removable",
  "columns": 1,
  "items": [
    {
      "id": "tag_1",
      "type": "component",
      "key": "tag",
      "children": [
        "Rush"
      ]
    },
    {
      "id": "tag_2",
      "type": "component",
      "key": "tag",
      "inputs": {
        "removable": true
      },
      "children": [
        "Repeat customer"
      ]
    },
    {
      "id": "tag_3",
      "type": "component",
      "key": "tag",
      "inputs": {
        "removable": true
      },
      "children": [
        "Site visit needed"
      ]
    }
  ]
}

<caos-tag>Rush</caos-tag>
<caos-tag removable>Repeat customer</caos-tag>
<caos-tag removable>Site visit needed</caos-tag>

With an avatar

A tag standing for a person, their picture placed in the avatar slot ahead of their name.

Cannot be shown as a page placement: is ordinary markup, not an installable component — a page places components, never bare markup.

<caos-tag>
  <img slot="avatar" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2216%22%20fill%3D%22%234f5bd5%22%2F%3E%3Ctext%20x%3D%2216%22%20y%3D%2221%22%20font-family%3D%22sans-serif%22%20font-size%3D%2213%22%20font-weight%3D%22600%22%20fill%3D%22white%22%20text-anchor%3D%22middle%22%3EDR%3C%2Ftext%3E%3C%2Fsvg%3E" alt=""></img>
  Dana Reyes
</caos-tag>

With an icon

The same slot holding an icon instead, saying the label names an account rather than a person.

Cannot be shown as a page placement: is ordinary markup, not an installable component — a page places components, never bare markup.

<caos-tag>
  <img slot="avatar" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23667085%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2022v-4h6v4M8%206h.01M12%206h.01M16%206h.01M8%2010h.01M12%2010h.01M16%2010h.01%22%2F%3E%3C%2Fsvg%3E" alt=""></img>
  Meridian Supply
</caos-tag>

In error

A recipient whose address bounced, beside one that did not: red, marked, and saying so in words.

{
  "id": "example",
  "section": "In error",
  "columns": 1,
  "items": [
    {
      "id": "tag_1",
      "type": "component",
      "key": "tag",
      "inputs": {
        "removable": true
      },
      "children": [
        "dana@meridian.example"
      ]
    },
    {
      "id": "tag_2",
      "type": "component",
      "key": "tag",
      "inputs": {
        "removable": true,
        "error": true
      },
      "children": [
        "orders@meridan.example"
      ]
    }
  ]
}

<caos-tag removable>dana@meridian.example</caos-tag>
<caos-tag removable error>orders@meridan.example</caos-tag>