badge

Author: JesmoDev

packages/uui-badge/lib/uui-badge.element.ts

@@ -32,6 +32,9 @@ export class UUIBadgeElement extends LitElement {
         box-sizing: border-box;
 
         border-radius: var(--uui-size-4);
+
+        color: var(--uui-color-primary-standalone);
+        background-color: var(--uui-color-surface-alt);
       }
 
       :host([color='primary']) {
@@ -93,12 +96,12 @@ export class UUIBadgeElement extends LitElement {
 
   /**
    * Changes the look of the badge to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" badge.
-   * @type {"primary"|"positive"|"warning"|"danger"}
+   * @type {"" | "primary"|"positive"|"warning"|"danger"}
    * @attr
    * @default primary
    */
   @property({ type: String, reflect: true })
-  color = 'primary';
+  color = '';
 
   /**
    * Bring attention to this badge by applying a bounce animation.

packages/uui-badge/lib/uui-badge.story.ts

@@ -131,7 +131,11 @@ OnButton.parameters = {
   },
 };
 
-export const LooksAndColors: Story = () => html`
+export const Colors: Story = () => html`
+  <div
+    style="position:relative; width:80px; height:80px; border: 2px dashed black">
+    <uui-badge>default/undefined</uui-badge>
+  </div>
   <div
     style="position:relative; width:80px; height:80px; border: 2px dashed black">
     <uui-badge color="primary">primary</uui-badge>