Notification Badge

Small badge overlaid on an icon or element to indicate unread count or alert state.

Surfaces

webgoogle-apps-script-webmcp-apps

Degraded on

Surface	Note
google-meet-stage	Overlay positioning unreliable in stage grid.
email	Renders as inline text.

Live preview

New

Fields

Field	Type
text	string. Badge label or count.	required
color	string. Background colour (hex).	optional

Example payload

{
  "type": "notification_badge",
  "text": "New"
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:notification_badge",
  "displayName": "Notification Badge",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/notification_badge",
  "capabilities": [
    "web",
    "google-apps-script-web",
    "mcp-apps"
  ],
  "description": "Small badge overlaid on an icon or element to indicate unread count or alert state.",
  "representativeQueries": [
    "show a unread count badge overlaid on icon element",
    "small badge overlaid on an icon or element to indicate unread count or alert state.",
    "render a notification badge"
  ]
}

← Full ARD catalog

Deploy your own Google Apps Script renderer

The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.

git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy

Full deploy guide →