# Connection Card

> Connected services and the live connection: ConnectionCard and ConnectionBanner.

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

Connected services and the live connection: `ConnectionCard` and `ConnectionBanner`.

ConnectionCard: `name`, `icon` or `logo` (node, e.g. the service's mark), `text`, `status` ("connected" | "expiring" | "error" | "missing"), `statusLabel`, `action`.
ConnectionBanner: `state` ("reconnecting" | "offline" | "online" hides it), `seconds`, `text`, `onRetry`. Thin bar under the top bar.

## Example

```tsx
import { Button, ConnectionBanner, ConnectionCard } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-col"
      style={{
        gap: 8,
      }}
    >
      <ConnectionBanner state="reconnecting" seconds={4} onRetry={() => {}} />
      <ConnectionCard
        name="Stripe · FollowerX GmbH"
        icon="card"
        text="Payments and refunds · 3 agents"
        status="connected"
        statusLabel="Connected"
        action={
          <Button size="sm" variant="soft">
            Manage
          </Button>
        }
      />
      <ConnectionCard
        name="Google Ads"
        icon="trend"
        text="Budgets and campaigns · 1 agent"
        status="expiring"
        statusLabel="Expires in 5 days"
        action={<Button size="sm">Renew</Button>}
      />
      <ConnectionCard
        name="Docs workspace"
        icon="book"
        text="Release notes · Echo"
        status="error"
        statusLabel="Error"
        action={<Button size="sm">Reconnect</Button>}
      />
      <ConnectionBanner state="offline" />
    </div>
  );
}
```

## Props

### 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. |

### ConnectionBanner

| Prop | Type | Notes |
| --- | --- | --- |
| `state` | `"reconnecting" \| "offline" \| "online"` | Required |
| `seconds?` | `number` |  |
| `text?` | `ReactNode` |  |
| `onRetry?` | `() => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### ConnectionCard

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | Required |
| `icon?` | `IconName` |  |
| `logo?` | `ReactNode` |  |
| `text?` | `ReactNode` |  |
| `status` | `"connected" \| "expiring" \| "error" \| "missing"` | Required |
| `statusLabel?` | `string` |  |
| `action?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |