diff --git a/.vscode/snippets.code-snippets b/.vscode/snippets.code-snippets
index f54eb01dab..d1c0d3d6b8 100644
--- a/.vscode/snippets.code-snippets
+++ b/.vscode/snippets.code-snippets
@@ -1,7 +1,10 @@
 {
   "Btrix Component": {
     "scope": "javascript,typescript",
-    "prefix": ["component", "@customElement"],
+    "prefix": [
+      "component",
+      "@customElement"
+    ],
     "isFileTemplate": true,
     "body": [
       "import { localized } from \"@lit/localize\";",
@@ -22,7 +25,10 @@
   },
   "Btrix Component Test": {
     "scope": "javascript,typescript",
-    "prefix": ["test","describe"],
+    "prefix": [
+      "test",
+      "describe"
+    ],
     "isFileTemplate": true,
     "body": [
       "import { expect, fixture } from \"@open-wc/testing\";",
@@ -54,5 +60,60 @@
       ""
     ],
     "description": "Unit test for custom component that extends `BtrixComponent`"
+  },
+  "Btrix Storybook Component Render": {
+    "scope": "javascript,typescript",
+    "prefix": [
+      "renderComponent",
+      "component"
+    ],
+    "isFileTemplate": true,
+    "body": [
+      "import { html } from \"lit\";",
+      "import { ifDefined } from \"lit/directives/if-defined.js\";",
+      "",
+      "import type { ${1:Component} } from \"@/${2:directory}/${3:component}\";",
+      "",
+      "import \"@/${2:directory}/${3:component}\";",
+      "",
+      "export type RenderProps = ${1:Component};",
+      "",
+      "export const renderComponent = (props: Partial<RenderProps>) => {",
+      "  return html`<btrix-${3:component} ${4:property}=${ifDefined(props.${4:property})}></btrix-${3:component}>`;",
+      "};"
+    ],
+    "description": "Component render for Storybook stories"
+  },
+  "Btrix Storybook Component Story": {
+    "scope": "javascript,typescript",
+    "prefix": [
+      "story",
+      "stories",
+      "doc"
+    ],
+    "isFileTemplate": true,
+    "body": [
+      "import type { Meta, StoryObj } from \"@storybook/web-components\";",
+      "",
+      "import { renderComponent, type RenderProps } from \"./${TM_FILENAME_BASE/\\.stories(.*)/$1/}\";",
+      "",
+      "const meta = {",
+      "  title: \"Components/${TM_FILENAME_BASE/\\.stories(.*)/$1/}\",",
+      "  component: \"btrix-${2:component}\",",
+      "  tags: [\"autodocs\"],",
+      "  decorators: [],",
+      "  render: renderComponent,",
+      "  argTypes: {},",
+      "  args: {},",
+      "} satisfies Meta<RenderProps>;",
+      "",
+      "export default meta;",
+      "type Story = StoryObj<RenderProps>;",
+      "",
+      "export const Basic: Story = {",
+      "  args: {},",
+      "};"
+    ],
+    "description": "Stories for component in Storybook"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/ui/badge.ts b/frontend/src/components/ui/badge.ts
index e679229211..992601f5de 100644
--- a/frontend/src/components/ui/badge.ts
+++ b/frontend/src/components/ui/badge.ts
@@ -13,17 +13,15 @@ export type BadgeVariant =
   | "primary"
   | "cyan"
   | "blue"
+  | "violet"
+  | "orange"
   | "high-contrast"
   | "text"
   | "text-neutral";
 
 /**
- * Show numeric value in a label
- *
- * Usage example:
- * ```ts
- * <btrix-badge aria-describedby="text">10</btrix-badge>
- * ```
+ * Badges are compact, non-interactive displays of contextual information.
+ * They are an unobtrusive way of drawing attention to dynamic data like statuses or counts.
  */
 @customElement("btrix-badge")
 export class Badge extends TailwindElement {
@@ -42,6 +40,12 @@ export class Badge extends TailwindElement {
   @property({ type: String, reflect: true })
   role: string | null = "status";
 
+  /**
+   * Style as normal text and not data
+   */
+  @property({ type: Boolean })
+  asLabel = false;
+
   static styles = css`
     :host {
       display: inline-flex;
@@ -52,21 +56,28 @@ export class Badge extends TailwindElement {
     return html`
       <span
         class=${clsx(
-          tw`inline-flex min-h-4 items-center justify-center align-[1px] leading-none`,
-          this.size === "medium" && tw`text-xs`,
+          tw`inline-flex min-h-4 items-center justify-center whitespace-nowrap leading-none`,
+          this.asLabel
+            ? [this.size === "medium" && tw`text-xs`]
+            : [
+                tw`font-mono [font-variation-settings:var(--font-monostyle-variation)]`,
+                this.size === "medium" && tw`text-xs`,
+              ],
           this.outline
             ? [
                 tw`mx-px ring-1`,
                 {
                   success: tw`bg-success-50 text-success-700 ring-success-400`,
-                  warning: tw`bg-warning-600 text-warning-600 ring-warning-600`,
-                  danger: tw`bg-danger-500 text-danger-500 ring-danger-500`,
+                  warning: tw`bg-warning-50 text-warning-600 ring-warning-600`,
+                  danger: tw`bg-danger-50 text-danger-500 ring-danger-500`,
                   neutral: tw`bg-neutral-100 text-neutral-600 ring-neutral-300`,
-                  "high-contrast": tw`bg-neutral-600 text-neutral-0 ring-neutral-0`,
+                  "high-contrast": tw`bg-neutral-0 text-neutral-700 ring-neutral-600`,
                   primary: tw`bg-white text-primary ring-primary`,
                   cyan: tw`bg-cyan-50 text-cyan-600 ring-cyan-600`,
                   blue: tw`bg-blue-50 text-blue-600 ring-blue-600`,
                   text: tw`text-blue-500 ring-blue-600`,
+                  violet: tw`bg-violet-50 text-violet-600 ring-violet-600`,
+                  orange: tw`bg-orange-50 text-orange-600 ring-orange-600`,
                   "text-neutral": tw`text-neutral-500 ring-neutral-600`,
                 }[this.variant],
               ]
@@ -79,13 +90,15 @@ export class Badge extends TailwindElement {
                 primary: tw`bg-primary text-neutral-0`,
                 cyan: tw`bg-cyan-50 text-cyan-600`,
                 blue: tw`bg-blue-50 text-blue-600`,
+                violet: tw`bg-violet-50 text-violet-600`,
+                orange: tw`bg-orange-50 text-orange-600`,
                 text: tw`text-blue-500`,
                 "text-neutral": tw`text-neutral-500`,
               }[this.variant],
           this.pill
             ? [
-                tw`min-w-[1.125rem] rounded-full`,
-                this.size === "large" ? tw`px-1.5 py-0.5` : tw`px-1`,
+                tw`min-w-[1.125rem] rounded-full px-2`,
+                this.size === "large" && tw`py-0.5`,
               ]
             : [tw`rounded`, this.size === "large" ? tw`px-2.5 py-1` : tw`px-2`],
         )}
diff --git a/frontend/src/features/crawls/crawler-channel-badge.ts b/frontend/src/features/crawls/crawler-channel-badge.ts
index adce184bdc..0ebdddfad9 100644
--- a/frontend/src/features/crawls/crawler-channel-badge.ts
+++ b/frontend/src/features/crawls/crawler-channel-badge.ts
@@ -21,9 +21,9 @@ export class CrawlerChannelBadge extends TailwindElement {
   channelId?: CrawlerChannelImage | AnyString;
 
   render() {
-    if (!this.channelId || !this.crawlerChannels) return;
+    if (!this.channelId) return;
 
-    const crawlerChannel = this.crawlerChannels.find(
+    const crawlerChannel = this.crawlerChannels?.find(
       ({ id }) => id === this.channelId,
     );
 
@@ -36,7 +36,6 @@ export class CrawlerChannelBadge extends TailwindElement {
         variant=${this.channelId === CrawlerChannelImage.Default
           ? "neutral"
           : "blue"}
-        class="font-monostyle whitespace-nowrap"
       >
         <sl-icon name="boxes" class="mr-1.5"></sl-icon>
         <span class="capitalize">${this.channelId}</span>
diff --git a/frontend/src/features/crawls/proxy-badge.ts b/frontend/src/features/crawls/proxy-badge.ts
index dabf5082a8..86ce9544ee 100644
--- a/frontend/src/features/crawls/proxy-badge.ts
+++ b/frontend/src/features/crawls/proxy-badge.ts
@@ -20,16 +20,18 @@ export class ProxyBadge extends TailwindElement {
   proxyId?: string;
 
   render() {
-    if (!this.proxyId || !this.orgProxies) return;
+    if (!this.proxyId) return;
 
-    const proxy = this.orgProxies.servers.find(({ id }) => id === this.proxyId);
+    const proxy = this.orgProxies?.servers.find(
+      ({ id }) => id === this.proxyId,
+    );
 
     return html`<btrix-popover
       content=${ifDefined(proxy?.description || undefined)}
       ?disabled=${!proxy?.description}
       hoist
     >
-      <btrix-badge variant="blue" class="font-monostyle whitespace-nowrap">
+      <btrix-badge variant="violet" class="font-monostyle">
         <sl-icon name="globe2" class="mr-1.5"></sl-icon>
         ${proxy?.label || this.proxyId}
       </btrix-badge>
diff --git a/frontend/src/pages/org/archived-item-detail/archived-item-detail.ts b/frontend/src/pages/org/archived-item-detail/archived-item-detail.ts
index 0cf0f79332..c2713a4a3d 100644
--- a/frontend/src/pages/org/archived-item-detail/archived-item-detail.ts
+++ b/frontend/src/pages/org/archived-item-detail/archived-item-detail.ts
@@ -732,9 +732,7 @@ export class ArchivedItemDetail extends BtrixElement {
                 <sl-icon name="cloud-download" slot="prefix"></sl-icon>
                 ${msg("Download Item")}
                 ${this.item?.fileSize
-                  ? html` <btrix-badge
-                      slot="suffix"
-                      class="font-monostyle text-xs text-neutral-500"
+                  ? html` <btrix-badge slot="suffix"
                       >${this.localize.bytes(this.item.fileSize)}</btrix-badge
                     >`
                   : nothing}
diff --git a/frontend/src/pages/org/archived-items.ts b/frontend/src/pages/org/archived-items.ts
index 03e1e2d27b..4eecc8b77f 100644
--- a/frontend/src/pages/org/archived-items.ts
+++ b/frontend/src/pages/org/archived-items.ts
@@ -792,9 +792,7 @@ export class CrawlsList extends BtrixElement {
             <sl-icon name="cloud-download" slot="prefix"></sl-icon>
             ${msg("Download Item")}
             ${item.fileSize
-              ? html` <btrix-badge
-                  slot="suffix"
-                  class="font-monostyle text-xs text-neutral-500"
+              ? html` <btrix-badge slot="suffix"
                   >${this.localize.bytes(item.fileSize)}</btrix-badge
                 >`
               : nothing}
diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts
index a49b9d2d30..7a812bc540 100644
--- a/frontend/src/pages/org/collection-detail.ts
+++ b/frontend/src/pages/org/collection-detail.ts
@@ -562,9 +562,7 @@ export class CollectionDetail extends BtrixElement {
             ${when(
               this.collection,
               (collection) => html`
-                <btrix-badge
-                  slot="suffix"
-                  class="font-monostyle text-xs text-neutral-500"
+                <btrix-badge slot="suffix"
                   >${this.localize.bytes(
                     collection.totalSize || 0,
                   )}</btrix-badge
diff --git a/frontend/src/pages/org/collections-list.ts b/frontend/src/pages/org/collections-list.ts
index bedc7b7430..1f95546608 100644
--- a/frontend/src/pages/org/collections-list.ts
+++ b/frontend/src/pages/org/collections-list.ts
@@ -689,9 +689,7 @@ export class CollectionsList extends WithSearchOrgContext(BtrixElement) {
           >
             <sl-icon name="cloud-download" slot="prefix"></sl-icon>
             ${msg("Download Collection")}
-            <btrix-badge
-              slot="suffix"
-              class="font-monostyle text-xs text-neutral-500"
+            <btrix-badge slot="suffix"
               >${this.localize.bytes(col.totalSize)}</btrix-badge
             >
           </btrix-menu-item-link>
diff --git a/frontend/src/pages/org/crawls.ts b/frontend/src/pages/org/crawls.ts
index 685be499cd..6fa9044717 100644
--- a/frontend/src/pages/org/crawls.ts
+++ b/frontend/src/pages/org/crawls.ts
@@ -658,9 +658,7 @@ export class OrgCrawls extends BtrixElement {
             <sl-icon name="cloud-download" slot="prefix"></sl-icon>
             ${msg("Download Item")}
             ${crawl.fileSize
-              ? html` <btrix-badge
-                  slot="suffix"
-                  class="font-monostyle text-xs text-neutral-500"
+              ? html` <btrix-badge slot="suffix"
                   >${this.localize.bytes(crawl.fileSize)}</btrix-badge
                 >`
               : nothing}
diff --git a/frontend/src/pages/org/workflow-detail.ts b/frontend/src/pages/org/workflow-detail.ts
index 102725c32f..45f4bb751e 100644
--- a/frontend/src/pages/org/workflow-detail.ts
+++ b/frontend/src/pages/org/workflow-detail.ts
@@ -764,9 +764,7 @@ export class WorkflowDetail extends BtrixElement {
                   <sl-icon name="cloud-download" slot="prefix"></sl-icon>
                   ${msg("Item")}
                   ${latestCrawl.fileSize
-                    ? html` <btrix-badge
-                        slot="suffix"
-                        class="font-monostyle text-xs text-neutral-500"
+                    ? html` <btrix-badge slot="suffix"
                         >${this.localize.bytes(
                           latestCrawl.fileSize,
                         )}</btrix-badge
diff --git a/frontend/src/stories/components/Badge.stories.ts b/frontend/src/stories/components/Badge.stories.ts
new file mode 100644
index 0000000000..3ba5efefbc
--- /dev/null
+++ b/frontend/src/stories/components/Badge.stories.ts
@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+import capitalize from "lodash/fp/capitalize";
+
+import { renderComponent, type RenderProps } from "./Badge";
+
+import "@/features/crawls/crawler-channel-badge";
+import "@/features/crawls/proxy-badge";
+
+const meta = {
+  title: "Components/Badge",
+  component: "btrix-badge",
+  tags: ["autodocs"],
+  decorators: [],
+  render: renderComponent,
+  argTypes: {},
+  args: {},
+} satisfies Meta<RenderProps>;
+
+export default meta;
+type Story = StoryObj<RenderProps>;
+
+export const Basic: Story = {
+  args: {
+    content: "2 URLs",
+  },
+};
+
+const variants = [
+  "success",
+  "warning",
+  "danger",
+  "neutral",
+  "primary",
+  "cyan",
+  "blue",
+  "violet",
+  "orange",
+  "high-contrast",
+  "text",
+  "text-neutral",
+] satisfies RenderProps["variant"][];
+
+/**
+ * Badges can be displayed in different variants.
+ */
+export const Variant: Story = {
+  decorators: (story) =>
+    html`<div class="flex flex-wrap items-center gap-3">${story()}</div>`,
+  render: () =>
+    html`${variants.map((variant) =>
+      renderComponent({
+        variant,
+        content: capitalize(variant),
+      }),
+    )}`,
+};
+
+/**
+ * Badges can be completely rounded so that they fit rounded
+ * containers better.
+ */
+export const Pill: Story = {
+  decorators: (story) =>
+    html`<div class="flex flex-wrap items-center gap-3">${story()}</div>`,
+  render: () =>
+    html`${variants.map((variant) =>
+      renderComponent({
+        variant,
+        pill: true,
+        content: capitalize(variant),
+      }),
+    )}`,
+};
+
+/**
+ * Badges can be outlined.
+ */
+export const Outline: Story = {
+  decorators: (story) =>
+    html`<div class="flex flex-wrap items-center gap-3">${story()}</div>`,
+  render: () =>
+    html`${variants.map((variant) =>
+      renderComponent({
+        variant,
+        outline: true,
+        content: capitalize(variant),
+      }),
+    )}`,
+};
+
+/**
+ * Badges can be displayed with more or less padding.
+ */
+export const Size: Story = {
+  decorators: (story) =>
+    html`<div class="flex flex-wrap items-center gap-3">${story()}</div>`,
+  render: () => {
+    const sizes = ["medium", "large"] satisfies RenderProps["size"][];
+
+    return html`${sizes.map((size) =>
+      renderComponent({
+        size,
+        content: capitalize(size),
+        pill: true,
+      }),
+    )}`;
+  },
+};
+
+/**
+ * By default, badges are displayed using the "monostyle" font to indicate
+ * that they show contextual, secondary data.
+ * When used as a label, the badge can be displayed using the default font.
+ */
+export const AsLabel: Story = {
+  args: {
+    content: "Tip",
+    asLabel: true,
+  },
+};
+
+/**
+ * These are examples of badges used in features.
+ */
+export const FeatureBadges: Story = {
+  render: () => html`
+    <btrix-proxy-badge proxyId="nz-proxy"></btrix-proxy-badge>
+    <btrix-crawler-channel-badge
+      channelId="default"
+    ></btrix-crawler-channel-badge>
+  `,
+};
diff --git a/frontend/src/stories/components/Badge.ts b/frontend/src/stories/components/Badge.ts
new file mode 100644
index 0000000000..78a058c2c3
--- /dev/null
+++ b/frontend/src/stories/components/Badge.ts
@@ -0,0 +1,20 @@
+import { html, type TemplateResult } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import type { Badge } from "@/components/ui/badge";
+
+import "@/components/ui/badge";
+
+export type RenderProps = Badge & { content: string | TemplateResult };
+
+export const renderComponent = (props: Partial<RenderProps>) => {
+  return html`<btrix-badge
+    variant=${ifDefined(props.variant)}
+    size=${ifDefined(props.size)}
+    ?outline=${props.outline}
+    ?pill=${props.pill}
+    ?asLabel=${props.asLabel}
+  >
+    ${props.content}
+  </btrix-badge>`;
+};