Service badge

ServiceBadge renders a category icon for a Brik service line — design, marketing, content, etc. Used in dashboard tiles, service-line indicators on entity rows, and anywhere a category needs a visual marker.

Use it for

• Visual marker for a service category (Brand Design, Marketing, Content)
• Dashboard tiles that need a recognizable category icon
• Sidebar entries grouped by service line

Import

import { ServiceBadge } from '@brikdesigns/bds';

Variants

Sizes

Three sizes — sm for inline, md for default, lg for tile-style placement.

<ServiceBadge category="design" size="sm" />
<ServiceBadge category="design" size="md" />
<ServiceBadge category="design" size="lg" />

With service name

Pass serviceName to resolve a specific service icon (within a category) when the generic category icon is too generic.

<ServiceBadge category="design" serviceName="brand-identity" />
<ServiceBadge category="content" serviceName="seo-strategy" />

When not to use

• Don't use ServiceBadge for non-service categories. It's tied to the Brik service taxonomy. For generic category labels, use Tag.
• Don't use it as a primary action. It's an indicator — the icon doesn't carry click semantics.
• Don't pass mode. The prop is deprecated and ignored. Use the in-progress ServiceTag if you need text or icon-text variants.

Accessibility

• Renders a <div> with the icon SVG. Pass an aria-label or wrap in a labeled container — the icon alone isn't a sufficient accessible name.

API

Related

• Tag — generic categorization
• Badge — status indicator
• Storybook playground