Notification Dot

This entry has no runnable specimen; the illustration is an editorial sketch contrasting the dot with the numeric badge, not a verified implementation. Before shipping, confirm the dot clears when looked at and give it a textual equivalent.

{
  "states": [
    "none",
    "unread",
    "seen"
  ],
  "a11y": [
    "The dot’s meaning has a textual equivalent and is not carried by color and shape alone",
    "The entry point that carries it says in its accessible name that there is something unread"
  ],
  "motion": "Appearing and clearing may be instant, with no blinking or pulsing under a reduced-motion preference"
}

{
  "id": "notification-dot",
  "type": "micro",
  "name": {
    "zh": "红点",
    "en": "Notification Dot"
  },
  "aliases": [
    "Badge Dot",
    "Unread Dot",
    "小红点",
    "未读标记"
  ],
  "granularity": "state",
  "intents": [
    "inform",
    "reveal-actions"
  ],
  "tags": [
    "unread",
    "badge",
    "indicator",
    "entry point",
    "attention"
  ],
  "definition": "A small dot attached to an icon or entry point that says only that something new is here: it gives no count, describes no content, and demands no immediate action, and it clears itself once the user goes in and looks.",
  "boundary": "A dot and a numeric badge carry different amounts of information: the badge says how many, the dot says only that there is something. A dot is usually chosen because the count itself is unimportant or unreliable; as soon as users start asking how many there are, a badge is what is needed. It is also not a notification: a notification presents its content actively, while a dot waits passively to be found. A dot works only while it is scarce — once every entry point carries one, it conveys nothing and leaves only a steady low-grade unease. Using a dot to steer users toward promotion unrelated to new content is a misuse.",
  "signature": [
    "A small dot with no number, attached to the corner of an icon or list row",
    "It says only that something is new, not how much, how urgent, or of what kind",
    "It clears itself once looked at, with no manual dismissal"
  ],
  "when": [
    "Something new is worth finding but the count itself means nothing to the user",
    "The count is unreliable or changes often, where showing a number only adds noise",
    "The entry point is too small to hold a numeric badge"
  ],
  "when_not": [
    "Users need it to judge how much time to spend, so the number is what they actually want",
    "Nearly every entry point in the product carries a permanent dot and it no longer conveys anything",
    "It marks promotions, campaigns, or anything unrelated to new content"
  ],
  "tradeoff": "A markless indicator costs almost nothing and takes almost no space, and it cannot lose credibility through a wrong count; the cost is that it carries just as little information — users cannot judge whether it is worth opening now and can only find out by opening it.",
  "comparison": {
    "focus": "Signalling that something new is here without saying what",
    "mechanism": "A small numberless dot at the corner of an entry point, cleared once looked at",
    "cost": "It carries very little information and works only while it stays scarce"
  },
  "sources": [
    {
      "id": "dot-ant-design",
      "title": "Ant Design · Badge",
      "url": "https://ant.design/components/badge",
      "claim": "The component documentation states that a badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying an unread message count, and its API defines a dot property as whether to display a red dot instead of the count (boolean, default false). This entry takes the distinction between the dot and the numeric badge from it.",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://ant.design/components/badge",
        "status": "available",
        "checkedAt": "2026-09-22T11:55:41.998Z",
        "jobId": "spn2-beff294742ecabb9374aa0590aa2949c456fdb44",
        "url": "https://web.archive.org/web/20260922115606/https://ant.design/components/badge/",
        "timestamp": "20260922115606"
      }
    },
    {
      "id": "dot-atlassian",
      "title": "Atlassian Design System · Badge",
      "url": "https://atlassian.design/components/badge/examples",
      "claim": "The component documentation defines a badge as used to display numeric status data. This entry cites it to show what the numeric badge carries, and so to frame the dot’s deliberate choice not to carry it.",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://atlassian.design/components/badge/examples",
        "status": "unconfirmed",
        "checkedAt": "2026-09-22T11:56:16.765Z",
        "error": "status-request-failed",
        "jobId": "spn2-44698dc83c105317e7bdcac6af84db71e3e3e766"
      }
    }
  ],
  "relations": [
    {
      "target": "status-message",
      "kind": "alternative",
      "condition": "The system needs to tell the user that something happened",
      "reason": "A status message presents content and states an outcome, while a dot passively hints that something exists; a dot cannot substitute where the user must understand what happened.",
      "basis": "editorial"
    },
    {
      "target": "notification-center",
      "kind": "composes_with",
      "condition": "After the dot is opened the user needs to see what it actually was",
      "reason": "The dot only marks the entry point and the content still needs a reviewable list; without one, the dot points at nothing.",
      "basis": "editorial"
    },
    {
      "target": "calm-technology",
      "kind": "composes_with",
      "condition": "The product wants new content findable without interrupting the current task",
      "reason": "A dot is a peripheral signal: it waits to be found rather than competing for attention, which is exactly placing information at the edge of attention.",
      "basis": "editorial"
    },
    {
      "target": "nagging",
      "kind": "conflicts_when",
      "condition": "The dot marks promotional content, or keeps reappearing after the user has looked",
      "reason": "An indicator that looking at it cannot clear is no longer a hint but a standing nudge.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "A dot appears on an entry point",
      "instruction": "Make sure looking at the content clears it and that it does not return when there is nothing new.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Several entry points in the interface could carry a dot",
      "instruction": "Cap how many appear at once and let users turn them off per source; the dot’s whole effect comes from scarcity.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "none",
      "unread",
      "seen"
    ],
    "a11y": [
      "The dot’s meaning has a textual equivalent and is not carried by color and shape alone",
      "The entry point that carries it says in its accessible name that there is something unread"
    ],
    "motion": "Appearing and clearing may be instant, with no blinking or pulsing under a reduced-motion preference"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch contrasting the dot with the numeric badge, not a verified implementation. Before shipping, confirm the dot clears when looked at and give it a textual equivalent.",
  "image": {
    "src": "/images/notification-dot.webp",
    "alt": "A side-by-side sketch: on the left a fictional rounded app tile with a small numberless dot at its top right; on the right a tile of the same shape carrying a numeric badge instead; and along the bottom a row of five tiles with different abstract glyphs, all wearing dots, showing that too many of them convey nothing."
  },
  "searchTerms": [
    "未读",
    "标记",
    "提示",
    "入口",
    "注意力"
  ]
}