Design
llms.txt digitalcrew.tech

Data display

ChannelBadge

Marks which channel a conversation or step runs on: email (amber), LinkedIn (sky), WhatsApp (emerald).

MaxData displayDigitalCrew.ChannelBadge
ChannelBadge · liveOpen

Guidelines#

Use it for Unibox threads, campaign steps and activity rows.

What you provide: channel (email | linkedin | whatsapp) and showLabel to print the name beside the 12px icon. Tinted pill: 10px medium text, the channel colour at 10% fill and 25% border, -700/-400 text.

Facts#

GroupData display
ProductMax
Globalwindow.DigitalCrew.ChannelBadge
Sourcemax-agent: src/features/unibox/ui/components/channel-badge.tsx
Import in the appimport { ChannelBadge } from "@/features/unibox/ui/components/channel-badge";

API#

TypeScript declarations emitted from src/features/unibox/ui/components/channel-badge.tsx.

type Channel = "email" | "linkedin" | "whatsapp";
interface ChannelBadgeProps {
    channel: Channel;
    /** Also print the channel name next to the icon. */
    showLabel?: boolean;
    className?: string;
}
export declare function ChannelBadge({ channel, showLabel, className, }: ChannelBadgeProps): JSX.Element;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "flex items-center gap-3" },
    h(DC.ChannelBadge, { channel: "email", showLabel: true }),
    h(DC.ChannelBadge, { channel: "linkedin", showLabel: true }),
    h(DC.ChannelBadge, { channel: "whatsapp", showLabel: true }),
    h(DC.ChannelBadge, { channel: "linkedin" }));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
AgentFaceAnimateDigitsAvatarCampaignStatusBadgeEmailVerificationBadgeHeroMetricKpiCardMaxIconSetMetricTileProspectAvatarSnippetTimeLensWorldGlobe