{
  "name": "badge-variants-table",
  "kind": "block",
  "primary": "card-ui",
  "page": "/catalog/ui-patterns/app/users-table-badge/users-table-badge.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<card-ui>\n  <header>\n    <h3>Users</h3>\n    <p slot=\"description\">Team members and their roles</p>\n  </header>\n  <section bleed>\n    <table-ui>\n      <thead>\n        <tr>\n          <th>User</th>\n          <th>Role</th>\n          <th>Status</th>\n          <th>Last active</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td><row-ui gap=\"2\" align=\"center\"><avatar-ui text=\"Alex Chen\" size=\"sm\"></avatar-ui><text-ui>Alex Chen</text-ui></row-ui></td>\n          <td><badge-ui text=\"Admin\" variant=\"accent\" size=\"sm\"></badge-ui></td>\n          <td><badge-ui text=\"Online\" variant=\"success\" size=\"sm\"></badge-ui></td>\n          <td><text-ui color=\"subtle\" size=\"sm\">2m ago</text-ui></td>\n        </tr>\n        <tr>\n          <td><row-ui gap=\"2\" align=\"center\"><avatar-ui text=\"Sarah Miller\" size=\"sm\"></avatar-ui><text-ui>Sarah Miller</text-ui></row-ui></td>\n          <td><badge-ui text=\"Editor\" variant=\"info\" size=\"sm\"></badge-ui></td>\n          <td><badge-ui text=\"Away\" variant=\"warning\" size=\"sm\"></badge-ui></td>\n          <td><text-ui color=\"subtle\" size=\"sm\">1h ago</text-ui></td>\n        </tr>\n        <tr>\n          <td><row-ui gap=\"2\" align=\"center\"><avatar-ui text=\"James Park\" size=\"sm\"></avatar-ui><text-ui>James Park</text-ui></row-ui></td>\n          <td><badge-ui text=\"Viewer\" variant=\"muted\" size=\"sm\"></badge-ui></td>\n          <td><badge-ui text=\"Offline\" variant=\"muted\" size=\"sm\"></badge-ui></td>\n          <td><text-ui color=\"subtle\" size=\"sm\">3h ago</text-ui></td>\n        </tr>\n      </tbody>\n    </table-ui>\n  </section>\n</card-ui>",
  "source": "catalog/ui-patterns/app/users-table-badge/users-table-badge.contents.html",
  "metadata": {
    "domain": "data",
    "description": "Users table showing role and status columns populated with badge-ui variants — accent for Admin, info for Editor, muted for Viewer, success/warning/muted for Online/Away/Offline status.",
    "keywords": [
      "badge",
      "variant",
      "accent",
      "info",
      "success",
      "warning",
      "danger",
      "muted",
      "badge-ui",
      "status",
      "pill",
      "indicator",
      "label",
      "tag",
      "users",
      "table",
      "roles",
      "members",
      "variants",
      "different",
      "badge-ui",
      "badge-variants",
      "accent",
      "info",
      "muted"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Users"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "Team members and their roles"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "textContent": "User",
      "variant": "body"
    },
    {
      "id": "text-4",
      "component": "Text",
      "textContent": "Role",
      "variant": "body"
    },
    {
      "id": "text-5",
      "component": "Text",
      "textContent": "Status",
      "variant": "body"
    },
    {
      "id": "text-6",
      "component": "Text",
      "textContent": "Last active",
      "variant": "body"
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "text-3",
        "text-4",
        "text-5",
        "text-6"
      ]
    },
    {
      "id": "avatar",
      "component": "Avatar",
      "size": "sm",
      "text": "Alex Chen"
    },
    {
      "id": "text-7",
      "component": "Text",
      "textContent": "Alex Chen"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar",
        "text-7"
      ]
    },
    {
      "id": "badge",
      "component": "Badge",
      "size": "sm",
      "text": "Admin",
      "variant": "accent"
    },
    {
      "id": "badge-2",
      "component": "Badge",
      "size": "sm",
      "text": "Online",
      "variant": "success"
    },
    {
      "id": "text-8",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "2m ago"
    },
    {
      "id": "column-8",
      "component": "Column",
      "children": [
        "row",
        "badge",
        "badge-2",
        "text-8"
      ]
    },
    {
      "id": "avatar-2",
      "component": "Avatar",
      "size": "sm",
      "text": "Sarah Miller"
    },
    {
      "id": "text-9",
      "component": "Text",
      "textContent": "Sarah Miller"
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-2",
        "text-9"
      ]
    },
    {
      "id": "badge-3",
      "component": "Badge",
      "size": "sm",
      "text": "Editor",
      "variant": "info"
    },
    {
      "id": "badge-4",
      "component": "Badge",
      "size": "sm",
      "text": "Away",
      "variant": "warning"
    },
    {
      "id": "text-10",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "1h ago"
    },
    {
      "id": "column-13",
      "component": "Column",
      "children": [
        "row-2",
        "badge-3",
        "badge-4",
        "text-10"
      ]
    },
    {
      "id": "avatar-3",
      "component": "Avatar",
      "size": "sm",
      "text": "James Park"
    },
    {
      "id": "text-11",
      "component": "Text",
      "textContent": "James Park"
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-3",
        "text-11"
      ]
    },
    {
      "id": "badge-5",
      "component": "Badge",
      "size": "sm",
      "text": "Viewer",
      "variant": "muted"
    },
    {
      "id": "badge-6",
      "component": "Badge",
      "size": "sm",
      "text": "Offline",
      "variant": "muted"
    },
    {
      "id": "text-12",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "3h ago"
    },
    {
      "id": "column-18",
      "component": "Column",
      "children": [
        "row-3",
        "badge-5",
        "badge-6",
        "text-12"
      ]
    },
    {
      "id": "column-7",
      "component": "Column",
      "children": [
        "column-8",
        "column-13",
        "column-18"
      ]
    },
    {
      "id": "table",
      "component": "Table",
      "children": [
        "column-2",
        "column-7"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "bleed": true,
      "children": [
        "column-23"
      ]
    },
    {
      "id": "column-23",
      "component": "Column",
      "children": [
        "table"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    }
  ]
}