Components / Account Identity
Account Identity
The one way to attribute a connected social account: avatar, platform badge, and username in a single row. Account selectors, post footers, anywhere a post or metric names its account.
import { AccountIdentity } from '@layers/ui/account-identity'Rendered stock
House rules
- Pass the account object (platform, username, profile_picture_url); a missing avatar falls back to the PlatformIcon inside the circle, never an empty one. A URL that fails to load counts as missing — stored avatar URLs rot (signed platform-CDN links expire), and the row never shows the broken-image glyph.
- Usernames render bare, never with an @ prefix.
- Sizes sm, md, and lg scale the avatar, platform badge, and gap together. textSize is an escape hatch for rows set in nonstandard type, not a fourth size.
- trailing renders inline after the username for suffix content like a status Badge; the username truncates first.
- Several destinations use AccountIdentityGroup, which drops the usernames and overlaps the platform-marked avatars. A creative reaches at most one account per platform, so with more than one destination the glance is asking which PLATFORMS, and truncated usernames answer nothing. One destination stays AccountIdentity, with the name.
- Not AvatarGroup + AvatarBadge for that job: the badge hides its glyph below default size and caps at 8px, so it renders an anonymous dot exactly where the platform has to be legible.
- AccountAvatar is the same marked avatar with the name dropped, for one destination in a row that has no width for a name — the 24px month-calendar chip. Reach for it only when the name genuinely does not fit; a name that merely truncates is still AccountIdentity.
- Ad targets are apps, not accounts; those rows use AppIdentity.