diff --git a/.changeset/giant-tigers-shout.md b/.changeset/giant-tigers-shout.md
new file mode 100644
index 000000000..93bc99c67
--- /dev/null
+++ b/.changeset/giant-tigers-shout.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-pill": minor
+---
+
+Add transparent variant
diff --git a/__docs__/wonder-blocks-pill/pill.argtypes.tsx b/__docs__/wonder-blocks-pill/pill.argtypes.tsx
index 1efd0494c..b8959dedd 100644
--- a/__docs__/wonder-blocks-pill/pill.argtypes.tsx
+++ b/__docs__/wonder-blocks-pill/pill.argtypes.tsx
@@ -22,7 +22,7 @@ export default {
         table: {
             type: {
                 summary: `"neutral" | "accent | "info" | "success" |
-                    "warning" | "critical"`,
+                    "warning" | "critical" | "transparent"`,
             },
             defaultValue: {summary: "neutral"},
         },
@@ -35,6 +35,7 @@ export default {
                 "success",
                 "warning",
                 "critical",
+                "transparent",
             ],
             required: false,
         },
diff --git a/__docs__/wonder-blocks-pill/pill.stories.tsx b/__docs__/wonder-blocks-pill/pill.stories.tsx
index a854efc86..a28d55c98 100644
--- a/__docs__/wonder-blocks-pill/pill.stories.tsx
+++ b/__docs__/wonder-blocks-pill/pill.stories.tsx
@@ -112,8 +112,8 @@ Inline.parameters = {
 };
 
 /**
- * There are six kinds of pills: neutral, accent, info, success, warning,
- * and critical. This can be specified using the `kind` prop.
+ * There are seven kinds of pills: neutral, accent, info, success, warning,
+ * critical and transparent. This can be specified using the `kind` prop.
  *
  * The following kinds respond to the following colors:
  * - `neutral`: gray
@@ -122,11 +122,12 @@ Inline.parameters = {
  * - `success`: light green
  * - `warning`: yellow
  * - `critical`: light red
+ * - `transparent`: transparent
  *
- * Pills can also be of three different sizes: small, medium, and large.
- * If the size is not specified, it defaults to medium. Small pills use
- * Wonder Blocks `LabelXSmall` typography, medium pills use Wonder Blocks
- * `LabelSmall`, and large pills use Wonder Blocks `Body`.
+ * Pills can also be of three different sizes: small, medium, and large. If the
+ * size is not specified, it defaults to medium. Small pills use Wonder Blocks
+ * `LabelXSmall` typography, medium pills use Wonder Blocks `LabelSmall`, and
+ * large pills use Wonder Blocks `Body`.
  */
 export const Variants: StoryComponentType = {
     render: () => {
@@ -137,6 +138,7 @@ export const Variants: StoryComponentType = {
             "success",
             "warning",
             "critical",
+            "transparent",
         ];
 
         const sizes: Array<PillSize> = ["small", "medium", "large"];
diff --git a/packages/wonder-blocks-pill/src/components/__tests__/pill.test.tsx b/packages/wonder-blocks-pill/src/components/__tests__/pill.test.tsx
index 2a05322f9..e00ffc63b 100644
--- a/packages/wonder-blocks-pill/src/components/__tests__/pill.test.tsx
+++ b/packages/wonder-blocks-pill/src/components/__tests__/pill.test.tsx
@@ -143,13 +143,14 @@ describe("Pill", () => {
     });
 
     test.each`
-        kind          | color
-        ${"neutral"}  | ${tokens.color.offBlack8}
-        ${"accent"}   | ${tokens.color.blue}
-        ${"info"}     | ${tokens.color.fadedBlue16}
-        ${"success"}  | ${tokens.color.fadedGreen16}
-        ${"warning"}  | ${tokens.color.fadedGold16}
-        ${"critical"} | ${tokens.color.fadedRed16}
+        kind             | color
+        ${"neutral"}     | ${tokens.color.offBlack8}
+        ${"accent"}      | ${tokens.color.blue}
+        ${"info"}        | ${tokens.color.fadedBlue16}
+        ${"success"}     | ${tokens.color.fadedGreen16}
+        ${"warning"}     | ${tokens.color.fadedGold16}
+        ${"critical"}    | ${tokens.color.fadedRed16}
+        ${"transparent"} | ${"transparent"}
     `(
         "renders the correct background color for $kind kind",
         ({kind, color}) => {
diff --git a/packages/wonder-blocks-pill/src/components/pill.tsx b/packages/wonder-blocks-pill/src/components/pill.tsx
index f87e1f221..87783b58a 100644
--- a/packages/wonder-blocks-pill/src/components/pill.tsx
+++ b/packages/wonder-blocks-pill/src/components/pill.tsx
@@ -21,7 +21,8 @@ export type PillKind =
     | "info"
     | "success"
     | "warning"
-    | "critical";
+    | "critical"
+    | "transparent";
 
 export type PillSize = "small" | "medium" | "large";
 
@@ -222,13 +223,16 @@ const _generateColorStyles = (clickable: boolean, kind: PillKind) => {
         case "critical":
             backgroundColor = tokens.color.fadedRed16;
             break;
+        case "transparent":
+            backgroundColor = "transparent";
+            break;
         case "neutral":
         default:
             backgroundColor = tokens.color.offBlack8;
     }
 
     const activeColor =
-        kind === "neutral"
+        kind === "neutral" || kind === "transparent"
             ? tokens.color.offBlack16
             : mix(tokens.color.offBlack32, backgroundColor);
 
@@ -239,15 +243,21 @@ const _generateColorStyles = (clickable: boolean, kind: PillKind) => {
     const activeOutlineColor =
         kind === "critical" ? tokens.color.activeRed : tokens.color.activeBlue;
 
+    const outline =
+        kind === "transparent"
+            ? `1px solid ${tokens.color.offBlack16}`
+            : "none";
+
     const colorStyles: StyleDeclaration = {
         pill: {
             backgroundColor: backgroundColor,
+            outline,
             color: textColor,
             alignItems: "center",
             justifyContent: "center",
         },
         clickableWrapper: {
-            outline: "none",
+            outline,
 
             ":hover": {
                 outline: `2px solid ${outlineColor}`,