> ## Documentation Index > Fetch the complete documentation index at: https://docs.permutive.com/llms.txt > Use this file to discover all available pages before exploring further. # Overview > Connect with 50+ partners across advertising, marketing, and data platforms export const BadgeRowCenter = ({label, children}) => { return

{label} {children}

; }; export const BadgeRow = ({label, children}) => { return

{label} {children}

; }; export const BadgeContainer = ({children}) => { return

{children}

; }; export const CapabilityBadge = ({capability}) => { const getBadgeStyle = capability => { switch (capability) { case 'Event Collection': return { background: '#EFDFC8', color: '#1A1A1A' }; --clay; case 'Cohort Activation': return { background: '#EFDFC8', color: '#1A1A1A' }; --clay; case 'Campaign Optimization': return { background: '#EFDFC8', color: '#1A1A1A' }; --clay; case 'Identity Signal': return { background: '#EFDFC8', color: '#1A1A1A' }; --clay; case 'Contextual Signal': return { background: '#EFDFC8', color: '#1A1A1A' }; --clay; case 'Connectivity': return { background: '#EFDFC8', color: '#1A1A1A' }; --clay; case 'Routing': return { background: '#EFDFC8', color: '#1A1A1A' }; --clay; case 'Data Collaboration': return { background: '#EFDFC8', color: '#1A1A1A' }; --clay; default: return { background: '#A7B3D9', color: '#1A1A1A' }; --haze; } }; const style = getBadgeStyle(capability); return {capability} ; }; export const EnvironmentBadge = ({environment}) => { const getBadgeStyle = environment => { switch (environment) { case 'Web': return { background: '#F9C1A8', color: '#1A1A1A' }; --peach; case 'iOS': return { background: '#F9C1A8', color: '#1A1A1A' }; --peach; case 'Android': return { background: '#F9C1A8', color: '#1A1A1A' }; --peach; case 'CTV': return { background: '#F9C1A8', color: '#1A1A1A' }; --peach; case 'API Direct': return { background: '#F9C1A8', color: '#1A1A1A' }; --peach; default: return { background: '#A7B3D9', color: '#1A1A1A' }; --haze; } }; const style = getBadgeStyle(environment); return {environment} ; }; export const DirectionBadge = ({direction}) => { const getBadgeStyle = direction => { switch (direction) { case 'Bidirectional': return { background: '#FA8784', color: '#1A1A1A' }; --tomato; case 'Destination': return { background: '#FA8784', color: '#1A1A1A' }; --tomato; case 'Source': return { background: '#FA8784', color: '#1A1A1A' }; --tomato; default: return { background: '#A7B3D9', color: '#1A1A1A' }; --haze; } }; const style = getBadgeStyle(direction); return {direction} ; }; ## Featured Integrations