Badge

Playground

'use client';
import { Badge, Icon, type BadgeSize, type BadgeShape } from '@mbsw/ui';
import { Plus, ChevronDown } from 'lucide-react';

export default function Demo() {
  const settings = {
    "leadingIcon": false,
    "trailingIcon": false,
    "label": "Text",
    "backgroundColor": "#5d4ff9",
    "textColor": "#ffffff",
    "size": "md",
    "shape": "square"
  };
  return (
    <Badge
      size={settings.size as BadgeSize}
      shape={settings.shape as BadgeShape}
      style={{
        backgroundColor: settings.backgroundColor,
        color: settings.textColor,
      }}
    >
      {settings.leadingIcon && (
        <Icon
          icon={Plus}
          size={settings.size === 'sm' ? '2xs' : 'xs'}
          position="inline-start"
          decorative
        />
      )}
      {settings.label}
      {settings.trailingIcon && (
        <Icon
          icon={ChevronDown}
          size={settings.size === 'sm' ? '2xs' : 'xs'}
          position="inline-end"
          decorative
        />
      )}
    </Badge>
  );
}

Properties

Size

Shape

Leading icon

Trailing icon

Background

Text

Content

Label

Usage

Use Badge for a short category or status label. It is not a button. Set colors with className or style. In Playground, use the picker or a HEX value to set the background and text colors. The background defaults to the primary color, and your chosen colors are applied to Badge's style.

'use client';
import { Badge } from '@mbsw/ui';

export default function Example() {
  return (
    <Badge size="md" shape="square">
      {"Text"}
    </Badge>
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

Badge