channel / components / channel-badge
ChannelBadge
The simplest way to think about it: a tiny chip that tells you where a message came from. Whatsapp gets its green dot, slack its red one, email its amber one — so when channels mix in a single conversation, the eye never loses track of the platform.
Preview
webemailwhatsappslackteamsdiscordtelegramsms
Notice
sms at the end: it's not in the built-in palette, yet it renders fine with a neutral accent. The channel prop is an open union — any string works.Install
pnpm dlx shadcn@latest add https://registry.ekairos.dev/r/channel-badge.jsonStart simple: one badge
Pass the channel name and you're done. Known platforms (web, email, whatsapp, slack, teams, gchat, discord, telegram) get their signature accent color:
import { ChannelBadge } from "@/components/ekairos/channel/channel-badge";
<ChannelBadge channel="whatsapp" />Custom channels just work
Because channel is a plain string, you don't need to wait for this component to learn about your platform. An internal channel, a niche provider, anything — unknown values fall back to a neutral gray dot instead of breaking:
<ChannelBadge channel="sms" />
<ChannelBadge channel="my-internal-bus" />This matters because the canonical message model is open too: a new ingestion channel shows up in your timeline correctly labeled, with zero UI changes.
Props
| prop | type | description |
|---|---|---|
| channel * | string | Channel kind: web, email, whatsapp, slack, teams, gchat, discord, telegram — or any custom string (neutral accent). |
| className | string | Extra classes for the chip. |