Connection Card

Data · Button, ConnectionBanner, 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.

PreviewCode

Connection lost. Retrying in 4 s

Stripe · FollowerX GmbHPayments and refunds · 3 agentsConnected

Google AdsBudgets and campaigns · 1 agentExpires in 5 days

Docs workspaceRelease notes · EchoError

Offline. Changes are kept and sent when you’re back.

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"`
`onClick?`	`(e: MouseEvent<HTMLButtonElement>) => void`
`children?`	`ReactNode`
`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.