Patterns
Connected Account Row
A row in a connected-accounts / integrations list — a provider avatar (image or glyph in a ring) with a badge overlay, name + sub-name, detail line, connected-time footer, and an unlink button.
A row in a connected-accounts / integrations list: a provider avatar (an image, or a glyph in a ring) with a small provider badge overlaid, the account name + an optional sub-name, a detail line (username / email), a connected-time footer, and an unlink button. Presentation only — the host owns the unlink action.
Import
import { ConnectedAccountRow } from "@yuhuanowo/yunui/patterns";
Example
Pass avatarUrl for a real avatar, or icon for a provider glyph in a ring. badge overlays a small provider mark bottom-right.
ConnectedAccountRow
GitHub· primary
@octocat
Connected 3 months ago
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| avatarUrl | string | — | Avatar image URL; falls back to `icon` in a ring. |
| badge | ReactNode | — | Small provider badge overlaid bottom-right. |
| className | string | — | |
| detail | ReactNode | — | Detail line — e.g. @username or an email. |
| icon | ReactNode | — | Provider glyph, shown in a ring when there's no avatar image. |
| name* | ReactNode | — | |
| onUnlink | (() => void) | — | |
| subname | ReactNode | — | A faint "· extra" after the name. |
| time | ReactNode | — | Host-formatted connected time (rendered after a clock glyph). |
| unlinking | boolean | — | |
| unlinkLabel | string | — |