Components
External connection panels
Make connection intent explicit with the provider identity and a written Connect or Disconnect action.
On this page
Purpose and usage
Make connection intent explicit with the provider identity and a written Connect or Disconnect action.
Anatomy
| Part | Contract |
|---|---|
| Logo | Provider asset in raised header |
| Description | Optional explanation |
| Action | Connect or Disconnect |
| Reference | Learn More destination |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| isConnected | Controls action label and visual treatment |
| onConnect / onDisconnect | Container owns actual integration |
| logoSrc / name | Provider identity |
| learnMoreUrl | External documentation destination |
State coverage
| State | Implemented behavior |
|---|---|
| Disconnected | Connect action |
| Connected | Disconnect action |
Interaction and composition
- Display only a state established by the owning workflow.
- Keep paid subscription status separate from connected status.
- Do not imply OAuth success from a static panel.
Accessibility and readiness
Connected/disconnected specimens are simulated, with no OAuth credentials or live account changes. Verify focus, useful logo alt text, failure and pending states in the actual connection workflow.
Composition example
<ExternalConnection name="Kit" logoSrc="/logos/kit.svg"
isConnected={connected} onConnect={connect}
onDisconnect={disconnect} learnMoreUrl={helpUrl} />Source references
| File | Responsibility |
|---|---|
| src/components/ExternalConnection.tsx | Provider card and callbacks |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1