@iota/apps-ui-kit 0.9.4 → 0.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "sideEffects": false,
   "repository": "https://github.com/iotaledger/iota",
   "license": "Apache-2.0",
@@ -27,7 +27,7 @@
     "classnames": "^2.5.1",
     "lodash.merge": "^4.6.2",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.7.4"
+    "@iota/apps-ui-icons": "0.7.5"
   },
   "peerDependencies": {
     "react": "^18 || ^19",

package/src/lib/components/atoms/badge/Badge.tsx

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
+import { BadgeSize } from './badge.enums';
 import type { BadgeType } from './badge.enums';
-import { BACKGROUND_COLORS, BADGE_TEXT_CLASS, BORDER_COLORS, TEXT_COLORS } from './badge.classes';
+import { BACKGROUND_COLORS, BORDER_COLORS, TEXT_COLORS } from './badge.classes';
 
 interface BadgeProps {
     /**
@@ -14,24 +15,30 @@ interface BadgeProps {
      * The label of the badge.
      */
     label?: string;
+    /**
+     * The size of the badge
+     */
+    size?: BadgeSize;
 }
 
-export function Badge({ type, label }: BadgeProps): React.JSX.Element {
+export function Badge({ type, label, size = BadgeSize.Medium }: BadgeProps): React.JSX.Element {
     const backgroundClasses = BACKGROUND_COLORS[type];
     const textClasses = TEXT_COLORS[type];
-    const borderClasses = BORDER_COLORS[type];
+    const isSmall = size === BadgeSize.Small;
     const labelClasses = label ? 'px-xs py-xxs' : 'h-1.5 w-1.5';
+    const textSizeClass = isSmall ? 'text-label-sm' : 'text-label-md';
 
     return (
         <div
             className={cx(
-                'inline-flex items-center space-x-2 rounded-full border disabled:opacity-30',
+                'inline-flex items-center space-x-2 rounded-full disabled:opacity-30',
+                { border: !isSmall },
                 backgroundClasses,
-                borderClasses,
+                { [BORDER_COLORS[type]]: !isSmall },
                 labelClasses,
             )}
         >
-            <span className={cx(BADGE_TEXT_CLASS, textClasses)}>{label}</span>
+            <span className={cx(textSizeClass, textClasses)}>{label}</span>
         </div>
     );
 }

package/src/lib/components/atoms/badge/badge.classes.ts

@@ -29,5 +29,3 @@ export const BORDER_COLORS: Record<BadgeType, string> = {
     [BadgeType.Warning]: 'border-warning-surface',
     [BadgeType.Error]: 'border-error-surface',
 };
-
-export const BADGE_TEXT_CLASS = 'text-label-md';

package/src/lib/components/atoms/badge/badge.enums.ts

@@ -9,3 +9,8 @@ export enum BadgeType {
     Warning = 'warning',
     Error = 'error',
 }
+
+export enum BadgeSize {
+    Medium = 'medium',
+    Small = 'small',
+}