# Agent Card

> One agent at a glance (AgentCard) and everything about it beside a chat (AgentDetails).

Component · AI · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/AgentCard/)

One agent at a glance (`AgentCard`) and everything about it beside a chat (`AgentDetails`).

AgentCard: `name`, `role`, `tint`, `status` + `statusLabel`, `model`, `cost`, `last`, `onClick`, `onChat`.
AgentDetails: `name`, `role`, `tint`, `status` + `statusLabel`, `sections` ({title, meta, items (KeyValue) or children, open}), `actions`.

## Example

```tsx
import * as React from "react";
import { AgentCard, AgentDetails, Button } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-grid"
      style={
        {
          "--cols": "1fr 1fr 300px",
          gap: 16,
          alignItems: "start",
        } as React.CSSProperties
      }
    >
      <AgentCard
        name="Atlas"
        role="Support triage"
        tint="sky"
        status="running"
        statusLabel="Working"
        model="Claude Sonnet 5.5"
        cost="€1.84"
        last="Drafted a reply to Northwind"
        onChat={() => {}}
        onClick={() => {}}
      />
      <AgentCard
        name="Ledger"
        role="Bookkeeping"
        tint="butter"
        status="signal"
        statusLabel="Waiting for approval"
        model="Claude Haiku 5.5"
        cost="€0.22"
        last="Proposed 3 bookings"
      />
      <div className="tf-panel">
        <AgentDetails
          name="Atlas"
          role="Support triage · Northwind"
          tint="sky"
          status="running"
          statusLabel="Working"
          sections={[
            {
              title: "Numbers",
              items: [
                ["Model", "Claude Sonnet 5.5"],
                ["Today", "€1.84", true],
                ["This month", "€38.20", true],
                ["Runs", "142"],
              ],
            },
            {
              title: "Tools",
              meta: "3",
              items: [
                ["Mailbox", "read, draft"],
                ["Knowledge base", "read"],
              ],
            },
            {
              title: "Memory",
              open: false,
              children: "Prefers short replies.",
            },
          ]}
          actions={[
            <Button key="c" variant="soft" icon="settings">
              Configure
            </Button>,
          ]}
        />
      </div>
    </div>
  );
}
```

## Props

### AgentCard

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | Required |
| `role?` | `string` |  |
| `tint?` | `Tint` |  |
| `status?` | `Status` |  |
| `statusLabel?` | `string` |  |
| `model?` | `string` |  |
| `cost?` | `string` |  |
| `last?` | `ReactNode` |  |
| `onClick?` | `() => void` |  |
| `onChat?` | `() => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### AgentDetails

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | Required |
| `role?` | `string` |  |
| `tint?` | `Tint` |  |
| `status?` | `Status` |  |
| `statusLabel?` | `string` |  |
| `sections?` | `{ title: string; meta?: ReactNode; items?: KeyValueItem[]; children?: ReactNode; open?: boolean; }[]` |  |
| `actions?` | `ReactNode[]` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Button

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"` |  |
| `size?` | `"md" \| "sm"` |  |
| `icon?` | `IconName` |  |
| `iconRight?` | `IconName` |  |
| `disabled?` | `boolean` |  |
| `type?` | `"button" \| "submit" \| "reset"` |  |
| `onClick?` | `(e: MouseEvent<HTMLButtonElement>) => void` |  |
| `children?` | `ReactNode` |  |
| `asChild?` | `boolean` | Render the single child element (a link, a router Link) with the button's look instead of a <button>. |
| `id?` | `string` |  |
| `name?` | `string` | Form field name and value, sent with the form when this button submits it. |
| `value?` | `string` |  |
| `form?` | `string` | The id of the form this button belongs to, when it sits outside it. |
| `title?` | `string` |  |
| `tabIndex?` | `number` |  |
| `autoFocus?` | `boolean` |  |
| `aria-label?` | `string` |  |
| `aria-labelledby?` | `string` |  |
| `aria-describedby?` | `string` |  |
| `aria-expanded?` | `boolean \| "true" \| "false"` | For disclosure and menu triggers: whether what the button controls is open. |
| `aria-controls?` | `string` |  |
| `aria-haspopup?` | `boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"` |  |
| `aria-pressed?` | `boolean \| "true" \| "false" \| "mixed"` | For toggle buttons. |
| `aria-current?` | `boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |