Connect

An inline card that prompts the user to connect a third-party integration from inside the Composer.

Connect Google

Manage emails and calendar events

Installation

import { Connect } from "@o/pipeline/experimental/components/composer/connect";

Usage

<Connect.Root>
  <Connect.Body>
    <Connect.Logo>
      <Logo.Google />
      <Indicator enabled />
    </Connect.Logo>
    <Connect.Header>
      <Connect.Title>Connect Google</Connect.Title>
      <Connect.Description>
        Manage emails and calendar events
      </Connect.Description>
    </Connect.Header>
  </Connect.Body>
  <Connect.Footer>
    <Connect.Actions>
      <Connect.Dismiss />
      <Connect.Submit />
    </Connect.Actions>
  </Connect.Footer>
</Connect.Root>

Connect.Root brings its own card surface and padding. There is no generic Composer body slot by design, so Connect.Root mounts directly as a keyed sibling of Composer.Header. The logo is passed in by the caller rather than resolved from a provider id: compose Logo with Indicator inside Connect.Logo, which establishes the positioning context the indicator needs.

Composition

Connect.Root
├── Connect.Body
│   ├── Connect.Logo
│   │   ├── Logo.*
│   │   └── Indicator
│   └── Connect.Header
│       ├── Connect.Title
│       └── Connect.Description
└── Connect.Footer
    └── Connect.Actions
        ├── Connect.Action
        ├── Connect.Dismiss
        └── Connect.Submit

Inside Composer

Dynamic content swaps happen directly under Composer.Root, as a keyed sibling of Composer.Editor. Dismissing returns to the editor; keep dismissal in host state, the same way Questionnaire does.

API Reference

Connect.Action, Connect.Dismiss, and Connect.Submit all accept pipeline Button props such as intent, size, and variant. Connect.Dismiss and Connect.Submit ship default labels (“Cancel”/“Connect”), and Connect.Submit defaults intent="success", so <Connect.Submit /> is complete as written.