ChannelLogo
Where a message came in, said with the brand itself in place of its name — WhatsApp and Instagram in their own marks and colours, the other doors in ChannelIcon's glyphs.
Channels
The two brands' marks come from Simple Icons (CC0), in their own colours (--color-whatsapp, --color-instagram-*); SMS, email, phone and the Okami link are ChannelIcon's glyphs in the text colour. size-3.5, for a 12px line.
import { ChannelLogo } from "@/components/shared/channel-logo";
<ChannelLogo channel="whatsapp" />
<ChannelLogo channel="instagram" />
<ChannelLogo channel="email" label="Email" /> {/* alone: named */}In a card's header
Given via, ChatCardHeader says the channel on the right: its logo, its name, then the time after a dot — the hero's cards. On a live call, Live says it instead.
EvaWhatsApp · 10:42
AdamInstagram · 18:05
JakubEmail · 07:40
<ChatCardHeader from="client" name="Eva" channel="WhatsApp" via="whatsapp" time="10:42" />Guidelines
- A brand's mark keeps its colours: never recoloured to ink.
- Beside its written name it is decorative; standing alone, it carries the name as its
label. - On the right, before the time: the person first, then the door and when.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| channel | Channel | — | instagram, whatsapp, sms, email, phone or link (CHANNELS). |
| label | string | — | The channel's name, only when the logo stands alone; read by screen readers. Left out, the logo is decorative. |
| className | string | size-3.5 | Sizes it; merged with the default. |