Components
Provider connection cards
Make connected services and their next action explicit.
On this page
Purpose and composition
ExternalConnection presents a provider’s logo, purpose, connection state, and connect/disconnect action.
Anatomy
- Logo on a white backing
- Provider name and description
- Connection action
- Optional learn-more destination
Configuration and variants
| Input or variant | Contract |
|---|---|
| isConnected | Chooses Connect or Disconnect. |
| onConnect / onDisconnect | Parent callbacks own provider navigation and completion. |
| logoSrc / name / description | Provider-specific identity and context. |
States and feedback
A connected card is a fixture UI state, not proof of a valid OAuth token. The component has no internal pending or error workflow.
Interaction and responsive behavior
Cards form the connections grid. Preserve the logo backing in dark mode and enough room for the description.
Accessibility and known limits
Actions need meaningful names; provider failures and return-state confirmation belong in the parent flow. Never expose credentials in a specimen.
Source references
| File | Responsibility |
|---|---|
| src/components/ExternalConnection.tsx | Connection presentation |
| src/app/dashboard/connections/page.tsx | Provider composition |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0