Add pill variation to badge

src/components.d.ts

@@ -47,6 +47,10 @@ export namespace Components {
         "shape": 'circle' | 'square' | 'rounded';
     }
     interface SlBadge {
+        /**
+          * Set to true to draw a pill-style badge with rounded edges.
+         */
+        "pill": boolean;
         /**
           * The badge's type.
          */
@@ -1105,6 +1109,10 @@ declare namespace LocalJSX {
         "shape"?: 'circle' | 'square' | 'rounded';
     }
     interface SlBadge {
+        /**
+          * Set to true to draw a pill-style badge with rounded edges.
+         */
+        "pill"?: boolean;
         /**
           * The badge's type.
          */

src/components/badge/badge.scss

@@ -2,8 +2,6 @@
 
 :host {
   display: inline-flex;
-  border-radius: var(--sl-border-radius-pill);
-  pointer-events: none;
 }
 
 .badge {
@@ -14,9 +12,10 @@
   font-weight: var(--sl-font-weight-semibold);
   letter-spacing: var(--sl-letter-spacing-normal);
   line-height: 1;
-  border-radius: inherit;
+  border-radius: var(--sl-border-radius-small);
   white-space: nowrap;
-  padding: 4px 8px;
+  padding: 3px 6px;
+  pointer-events: none;
   user-select: none;
   cursor: inherit;
 }
@@ -49,3 +48,11 @@
   background-color: var(--sl-color-danger-50);
   color: var(--sl-color-white);
 }
+
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// Pill modifiers
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+.badge--pill {
+  border-radius: var(--sl-border-radius-pill);
+}

src/components/badge/badge.tsx

@@ -21,6 +21,9 @@ export class Badge {
   /** The badge's type. */
   @Prop() type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'primary';
 
+  /** Set to true to draw a pill-style badge with rounded edges. */
+  @Prop() pill = false;
+
   render() {
     return (
       <span
@@ -35,7 +38,8 @@ export class Badge {
           'badge--info': this.type === 'info',
           'badge--warning': this.type === 'warning',
           'badge--danger': this.type === 'danger',
-          'badge--text': this.type === 'text'
+          'badge--text': this.type === 'text',
+          'badge--pill': this.pill
         }}
         role="status"
       >