Add pill variation to badge

docs/assets/plugins/metadata/metadata.js

@@ -292,11 +292,11 @@
               </div>
 
               <div class="component-header__info">
-                <sl-badge type="info">
+                <sl-badge type="info" pill>
                   Since ${tags.since || '?'}
                 </sl-badge>
 
-                <sl-badge type="${badgeType}" style="text-transform: capitalize;">
+                <sl-badge type="${badgeType}" pill style="text-transform: capitalize;">
                   ${tags.status}
                 </sl-badge>
               </div>

docs/components/badge.md

@@ -22,6 +22,16 @@ Set the `type` attribute to change the badge's type.
 <sl-badge type="danger">Danger</sl-badge>
 ```
 
+### Pill Badges
+
+```html preview
+<sl-badge type="primary" pill>Primary</sl-icon></sl-badge>
+<sl-badge type="success" pill>Success</sl-badge>
+<sl-badge type="info" pill>Info</sl-badge>
+<sl-badge type="warning" pill>Warning</sl-badge>
+<sl-badge type="danger" pill>Danger</sl-badge>
+```
+
 ### With Buttons
 
 One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
@@ -29,17 +39,17 @@ One of the most common use cases for badges is attaching them to buttons. To mak
 ```html preview
 <sl-button>
   Requests
-  <sl-badge>30</sl-badge>
+  <sl-badge pill>30</sl-badge>
 </sl-button>
 
 <sl-button style="margin-left: 1rem;">
   Warnings
-  <sl-badge type="warning">8</sl-badge>
+  <sl-badge type="warning" pill>8</sl-badge>
 </sl-button>
 
 <sl-button style="margin-left: 1rem;">
   Errors
-  <sl-badge type="danger">6</sl-badge>
+  <sl-badge type="danger" pill>6</sl-badge>
 </sl-button>
 ```
 
@@ -52,8 +62,8 @@ When including badges in menu items, use the `suffix` slot to make sure they're
   style="max-width: 240px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
 >
   <sl-menu-label>Messages</sl-menu-label>
-  <sl-menu-item>Comments <sl-badge slot="suffix">4</sl-badge></sl-menu-item>
-  <sl-menu-item>Replies <sl-badge slot="suffix">12</sl-badge></sl-menu-item>
+  <sl-menu-item>Comments <sl-badge slot="suffix" pill>4</sl-badge></sl-menu-item>
+  <sl-menu-item>Replies <sl-badge slot="suffix" pill>12</sl-badge></sl-menu-item>
 </sl-menu>
 ```
 

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"
       >