Wildcard: Migrate usage of "badge" styles to <Badge /> component (#28399)

2026-02-06 18:31:54 +00:00 · 2021-12-09 13:39:46 +00:00 · 2021-12-09 13:39:46 +00:00 · bd3cffb3e8
commit bd3cffb3e8
parent c1c33256d1
62 changed files with 528 additions and 370 deletions
--- a/client/branded/src/global-styles/badge.scss
+++ b/client/branded/src/global-styles/badge.scss
@ -1,164 +0,0 @@
-@import 'bootstrap/scss/badge';
-
-// Light theme badge variants
-:where(.theme-light) {
-    @each $color, $value in $theme-colors {
-        .badge-#{$color},
-        :where(a).badge-#{$color} {
-            @include badge-variant($value);
-        }
-    }
-}
-
-:root {
-    --badge-font-size: 0.75rem;
-    --badge-font-weight: 500;
-    --badge-padding-y: 0.125rem;
-    --badge-padding-x: 0.375rem;
-    --badge-border-radius: 3px;
-}
-
-.badge {
-    background-color: var(--subtle-bg);
-    color: var(--link-color);
-    border: none;
-    line-height: 1rem;
-
-    &:focus,
-    &.focus {
-        outline: 0;
-    }
-}
-
-.badge-sm {
-    --badge-font-size: #{(11/16)}rem;
-    --badge-padding-y: 0;
-    --badge-padding-x: 0.25rem;
-    --badge-border-radius: 2px;
-}
-
-a.badge {
-    // Badge acts like btn-link, replicate Bootstrap btn transition
-    transition: $btn-transition;
-}
-
-// Variants
-.badge-primary,
-.badge-secondary,
-.badge-success,
-.badge-danger,
-.badge-info,
-.badge-warning,
-.badge-merged,
-.badge-outline-secondary {
-    background-color: var(--badge-base);
-    color: var(--badge-text);
-    border: var(--badge-border, none);
-
-    @at-root #{selector-unify('a', &)} {
-        background-color: var(--badge-base);
-        color: var(--badge-text);
-
-        &:hover,
-        &:focus,
-        &.focus {
-            color: var(--badge-text);
-            background-color: var(--badge-dark);
-        }
-
-        &:focus,
-        &.focus {
-            outline: 0;
-
-            @at-root #{selector-append('.theme-light', &)} {
-                box-shadow: 0 0 0 0.125rem var(--badge-light);
-            }
-            @at-root #{selector-append('.theme-dark', &)} {
-                box-shadow: 0 0 0 0.125rem var(--badge-dark);
-            }
-        }
-    }
-}
-
-.badge-primary {
-    --badge-base: var(--primary);
-    --badge-light: var(--primary-2);
-    --badge-dark: var(--primary-3);
-    --badge-text: var(--light-text);
-}
-
-.badge-secondary {
-    --badge-base: var(--secondary);
-    --badge-light: var(--secondary-2);
-    --badge-dark: var(--secondary-3);
-    --badge-text: var(--body-color);
-}
-
-.badge-success {
-    --badge-base: var(--success);
-    --badge-light: var(--success-2);
-    --badge-dark: var(--success-3);
-    --badge-text: var(--light-text);
-}
-
-.badge-danger {
-    --badge-base: var(--danger);
-    --badge-light: var(--danger-2);
-    --badge-dark: var(--danger-3);
-    --badge-text: var(--light-text);
-}
-
-.badge-info {
-    --badge-base: var(--info);
-    --badge-light: var(--info-2);
-    --badge-dark: var(--info-3);
-    --badge-text: var(--dark-text);
-}
-
-.badge-warning {
-    --badge-base: var(--warning);
-    --badge-light: var(--warning-2);
-    --badge-dark: var(--warning-3);
-    --badge-text: var(--dark-text);
-}
-
-.badge-merged {
-    --badge-base: var(--merged);
-    --badge-light: var(--merged-2);
-    --badge-dark: var(--merged-3);
-    --badge-text: var(--light-text);
-}
-
-.badge-outline-secondary {
-    --badge-base: transparent;
-    --badge-light: var(--secondary-2);
-    --badge-dark: var(--secondary-3);
-    --badge-text: var(--text-muted);
-    --badge-border: 1px solid var(--secondary);
-}
-
-.theme-light,
-.theme-dark {
-    // Update secondary text color and focus state for better contrast
-    a.badge-secondary,
-    a.badge-outline-secondary {
-        &:focus,
-        &.focus {
-            box-shadow: var(--focus-box-shadow);
-        }
-    }
-    a.badge-secondary {
-        &:hover,
-        &:focus,
-        &.focus {
-            color: var(--body-color);
-        }
-    }
-    a.badge-outline-secondary {
-        &:hover,
-        &:focus,
-        &.focus {
-            background-color: var(--color-bg-1);
-        }
-    }
-}
--- a/client/branded/src/global-styles/index.scss
+++ b/client/branded/src/global-styles/index.scss
@ -26,14 +26,6 @@ $border-color: var(--border-color);
 $link-color: var(--link-color);
 $link-hover-color: var(--link-hover-color);

-// Badges
-
-$badge-font-size: var(--badge-font-size);
-$badge-font-weight: var(--badge-font-weight);
-$badge-padding-y: var(--badge-padding-y);
-$badge-padding-x: var(--badge-padding-x);
-$badge-border-radius: var(--badge-border-radius);
-
 // Tooltips

 $tooltip-bg: var(--tooltip-bg);
@ -104,7 +96,6 @@ $hr-margin-y: 0.25rem;

 // Disable transitions
 $input-transition: none;
-$badge-transition: none; // Avoids setting transitions on badges that aren't links

 // Spacer
 $spacer: 1rem;
@ -139,7 +130,6 @@ $spacer: 1rem;
@import 'wildcard/src/global-styles/breakpoints';
@import 'shared/src/global-styles/icons';
@import './background';
-@import './badge';
@import './card';
@import './dropdown';
@import './modal';
--- a/client/browser/src/shared/code-hosts/shared/codeHost.tsx
+++ b/client/browser/src/shared/code-hosts/shared/codeHost.tsx
@ -518,7 +518,7 @@ function initCodeIntelligence({
                    location={H.createLocation(window.location)}
                    onCloseButtonClick={this.nextCloseButtonClick}
                    onAlertDismissed={onHoverAlertDismissed}
-                    isBranded={true}
+                    useBrandedLogo={true}
                />
            ) : null
        }
--- a/client/eslint-plugin-wildcard/lib/index.js
+++ b/client/eslint-plugin-wildcard/lib/index.js
@ -27,7 +27,7 @@ module.exports = {
          },
        ],
        '@sourcegraph/wildcard/forbid-class-name': [
-          'off', // Current disabled until first `<Badge />` component is migrated: https://github.com/sourcegraph/sourcegraph/issues/27622
+          'error',
          {
            forbid: [
              {
--- a/client/eslint-plugin-wildcard/lib/rules/forbid-class-name.js
+++ b/client/eslint-plugin-wildcard/lib/rules/forbid-class-name.js
@ -20,7 +20,7 @@ const config = {
    const extractStringLiteral = attributeNode => {
      if (attributeNode.type === 'JSXExpressionContainer') {
        return attributeNode.expression.arguments
-          .filter(argument => argument.type === 'Literal')
+          ?.filter(argument => argument.type === 'Literal')
          .flatMap(argument => argument.value.split(' '))
      }

--- a/client/shared/src/components/FileMatch.tsx
+++ b/client/shared/src/components/FileMatch.tsx
@ -1,7 +1,9 @@
 import * as H from 'history'
 import React, { useMemo } from 'react'
 import { Observable } from 'rxjs'
-import { AggregableBadge, Badge } from 'sourcegraph'
+import { AggregableBadge, Badge as ExtensionBadgeType } from 'sourcegraph'
+
+import { Badge } from '@sourcegraph/wildcard'

 import { ContentMatch, SymbolMatch, PathMatch, getFileMatchUrl, getRepositoryUrl, getRevision } from '../search/stream'
 import { isSettingsValid, SettingsCascadeProps } from '../settings/settings'
@ -11,14 +13,13 @@ import { pluralize } from '../util/strings'
 import { FetchFileParameters } from './CodeExcerpt'
 import { FileMatchChildren } from './FileMatchChildren'
 import { MatchGroup, calculateMatchGroups } from './FileMatchContext'
-import { LinkOrSpan } from './LinkOrSpan'
 import { RepoFileLink } from './RepoFileLink'
 import { RepoIcon } from './RepoIcon'
 import { Props as ResultContainerProps, ResultContainer } from './ResultContainer'

 const SUBSET_MATCHES_COUNT = 10

-export interface MatchItem extends Badge {
+export interface MatchItem extends ExtensionBadgeType {
    highlightRanges: {
        start: number
        highlightLength: number
@ -134,16 +135,16 @@ export const FileMatch: React.FunctionComponent<Props> = props => {
        items.length > 0 ? (
            <>
                {aggregateBadges(items).map(badge => (
-                    <LinkOrSpan
+                    <Badge
                        key={badge.text}
-                        to={badge.linkURL}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        data-tooltip={badge.hoverMessage}
-                        className="badge badge-secondary badge-sm text-muted text-uppercase file-match__badge"
+                        href={badge.linkURL}
+                        tooltip={badge.hoverMessage}
+                        variant="secondary"
+                        small={true}
+                        className="text-muted text-uppercase file-match__badge"
                    >
                        {badge.text}
-                    </LinkOrSpan>
+                    </Badge>
                ))}
            </>
        ) : undefined
--- a/client/shared/src/hover/HoverOverlay.story.tsx
+++ b/client/shared/src/hover/HoverOverlay.story.tsx
@ -56,4 +56,4 @@ export const BitbucketStyles: Story = props => (
 )
 BitbucketStyles.storyName = 'Bitbucket styles'

-export const Branded: Story = () => <BitbucketStyles isBranded={true} />
+export const Branded: Story = () => <BitbucketStyles useBrandedLogo={true} />
--- a/client/shared/src/hover/HoverOverlay.tsx
+++ b/client/shared/src/hover/HoverOverlay.tsx
@ -54,7 +54,12 @@ export interface HoverOverlayProps
    hoverRef?: React.Ref<HTMLDivElement>
    /** Called when the close button is clicked */
    onCloseButtonClick?: (event: MouseEvent) => void
-    isBranded?: boolean
+
+    /** Show Sourcegraph logo alongside prompt */
+    useBrandedLogo?: boolean
+
+    /** Show Sourcegraph branded badges */
+    useBrandedBadge?: boolean
 }

 const getOverlayStyle = (overlayPosition: HoverOverlayProps['overlayPosition']): CSSProperties =>
@ -94,7 +99,8 @@ export const HoverOverlay: React.FunctionComponent<HoverOverlayProps> = props =>
        onAlertDismissed,
        onCloseButtonClick,

-        isBranded,
+        useBrandedLogo,
+        useBrandedBadge,
    } = props

    useLogTelemetryEvent(props)
@ -136,6 +142,7 @@ export const HoverOverlay: React.FunctionComponent<HoverOverlayProps> = props =>
                <HoverOverlayContents
                    hoverOrError={hoverOrError}
                    iconClassName={iconClassName}
+                    useBrandedBadge={useBrandedBadge}
                    badgeClassName={badgeClassName}
                    errorAlertClassName={getAlertClassName?.(NotificationType.Error)}
                    contentClassName={contentClassName}
@ -183,7 +190,7 @@ export const HoverOverlay: React.FunctionComponent<HoverOverlayProps> = props =>
                            ))}
                        </div>

-                        {isBranded && <HoverOverlayLogo className={hoverOverlayStyle.overlayLogo} />}
+                        {useBrandedLogo && <HoverOverlayLogo className={hoverOverlayStyle.overlayLogo} />}
                    </div>
                )}
        </div>
--- a/client/shared/src/hover/HoverOverlayContents/HoverOverlayContent/HoverOverlayContent.tsx
+++ b/client/shared/src/hover/HoverOverlayContents/HoverOverlayContent/HoverOverlayContent.tsx
@ -2,8 +2,9 @@ import classNames from 'classnames'
 import { upperFirst } from 'lodash'
 import React from 'react'

+import { Badge } from '@sourcegraph/wildcard'
+
 import { HoverMerged } from '../../../api/client/types/hover'
-import { LinkOrSpan } from '../../../components/LinkOrSpan'
 import { asError } from '../../../util/errors'
 import { renderMarkdown } from '../../../util/markdown'
 import hoverOverlayStyle from '../../HoverOverlay.module.scss'
@ -15,6 +16,14 @@ interface HoverOverlayContentProps {
    content: HoverMerged['contents'][number]
    aggregatedBadges: HoverMerged['aggregatedBadges']
    index: number
+    /**
+     * Use our branded badge. For use in Sourcegraph branded applications.
+     */
+    useBrandedBadge?: boolean
+    /**
+     * Allows custom styles
+     * Primarily used to inherit different styles for use on a code host.
+     */
    badgeClassName?: string
    errorAlertClassName?: string
    contentClassName?: string
@ -29,7 +38,7 @@ function tryMarkdownRender(content: string): string | Error {
 }

 export const HoverOverlayContent: React.FunctionComponent<HoverOverlayContentProps> = props => {
-    const { content, aggregatedBadges = [], index, errorAlertClassName, badgeClassName } = props
+    const { content, aggregatedBadges = [], index, errorAlertClassName, badgeClassName, useBrandedBadge } = props

    if (content.kind !== 'markdown') {
        return (
@ -57,15 +66,18 @@ export const HoverOverlayContent: React.FunctionComponent<HoverOverlayContentPro
            {index !== 0 && <hr />}
            {aggregatedBadges.map(({ text, linkURL, hoverMessage }) => (
                <small key={text} className={classNames(hoverOverlayStyle.badge)}>
-                    <LinkOrSpan
-                        to={linkURL}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        data-tooltip={hoverMessage}
+                    <Badge
+                        branded={Boolean(useBrandedBadge)}
+                        {...(useBrandedBadge && {
+                            variant: 'secondary',
+                            small: true,
+                        })}
                        className={classNames('test-hover-badge', badgeClassName, hoverOverlayStyle.badgeLabel)}
+                        href={linkURL}
+                        tooltip={hoverMessage}
                    >
                        {text}
-                    </LinkOrSpan>
+                    </Badge>
                </small>
            ))}
            <span
--- a/client/shared/src/hover/HoverOverlayContents/HoverOverlayContents.tsx
+++ b/client/shared/src/hover/HoverOverlayContents/HoverOverlayContents.tsx
@ -12,13 +12,21 @@ import { HoverOverlayContent } from './HoverOverlayContent'

 interface HoverOverlayContentsProps extends Pick<HoverOverlayBaseProps, 'hoverOrError'> {
    iconClassName?: string
+    useBrandedBadge?: boolean
    badgeClassName?: string
    errorAlertClassName?: string
    contentClassName?: string
 }

 export const HoverOverlayContents: React.FunctionComponent<HoverOverlayContentsProps> = props => {
-    const { hoverOrError, iconClassName, errorAlertClassName, badgeClassName, contentClassName } = props
+    const {
+        hoverOrError,
+        iconClassName,
+        errorAlertClassName,
+        badgeClassName,
+        useBrandedBadge,
+        contentClassName,
+    } = props

    if (hoverOrError === 'loading') {
        return (
@ -56,6 +64,7 @@ export const HoverOverlayContents: React.FunctionComponent<HoverOverlayContentsP
                    content={content}
                    aggregatedBadges={hoverOrError.aggregatedBadges}
                    errorAlertClassName={errorAlertClassName}
+                    useBrandedBadge={useBrandedBadge}
                    badgeClassName={badgeClassName}
                    contentClassName={contentClassName}
                />
--- a/client/web/src/auth/CloudSignUpPage.tsx
+++ b/client/web/src/auth/CloudSignUpPage.tsx
@ -5,6 +5,7 @@ import { Link, useLocation } from 'react-router-dom'

 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { ProductStatusBadge } from '@sourcegraph/wildcard'

 import { BrandLogo } from '../components/branding/BrandLogo'
 import { FeatureFlagProps } from '../featureFlags/featureFlags'
@ -161,7 +162,7 @@ export const CloudSignUpPage: React.FunctionComponent<Props> = ({
                    <ul className={styles.featureList}>
                        <li>
                            <div className="d-flex align-items-center">
-                                <span className="badge badge-info text-uppercase mr-1">Beta</span> Search across all
+                                <ProductStatusBadge status="beta" className="text-uppercase mr-1" /> Search across all
                                your public and private repositories
                            </div>
                        </li>
--- a/client/web/src/auth/snapshots/SignUpPage.test.tsx.snap
+++ b/client/web/src/auth/snapshots/SignUpPage.test.tsx.snap
@ -55,9 +55,10 @@ exports[`SignUpPage renders sign up page (cloud) 1`] = `
              class="d-flex align-items-center"
            >
              <span
-                class="badge badge-info text-uppercase mr-1"
+                class="badge info productStatusBadge text-uppercase mr-1"
+                status="beta"
              >
-                Beta
+                beta
              </span>
               Search across all your public and private repositories
            </div>
--- a/client/web/src/batches/RepoBatchChangesButton.tsx
+++ b/client/web/src/batches/RepoBatchChangesButton.tsx
@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'

 import { encodeURIPathComponent } from '@sourcegraph/shared/src/util/url'
 import { useObservable } from '@sourcegraph/shared/src/util/useObservable'
+import { Badge } from '@sourcegraph/wildcard'

 import { queryRepoChangesetsStats as _queryRepoChangesetsStats } from './backend'
 import { BatchChangesIcon } from './icons'
@ -33,20 +34,22 @@ export const RepoBatchChangesButton: FC<RepoBatchChangesButtonProps> = ({
        <Link className={className} to={`/${encodeURIPathComponent(repoName)}/-/batch-changes`}>
            <BatchChangesIcon className="icon-inline" /> Batch Changes
            {open > 0 && (
-                <span
-                    className="d-inline-block badge badge-success batch-change-badge ml-2"
-                    data-tooltip={`${open} open batch changesets`}
+                <Badge
+                    tooltip={`${open} open batch changesets`}
+                    variant="success"
+                    className="d-inline-block batch-change-badge ml-2"
                >
                    {open}
-                </span>
+                </Badge>
            )}
            {merged > 0 && (
-                <span
-                    className="d-inline-block badge badge-merged batch-change-badge ml-2"
-                    data-tooltip={`${merged} merged batch changesets`}
+                <Badge
+                    tooltip={`${merged} merged batch changesets`}
+                    variant="merged"
+                    className="d-inline-block batch-change-badge ml-2"
                >
                    {merged}
-                </span>
+                </Badge>
            )}
        </Link>
    )
--- a/client/web/src/components/WebHoverOverlay/WebHoverOverlay.tsx
+++ b/client/web/src/components/WebHoverOverlay/WebHoverOverlay.tsx
@ -53,10 +53,10 @@ export const WebHoverOverlay: React.FunctionComponent<HoverOverlayProps & HoverT
    return (
        <HoverOverlay
            {...propsToUse}
+            useBrandedBadge={true}
            className={classNames('card', styles.webHoverOverlay)}
            closeButtonClassName={classNames('btn btn-icon', styles.webHoverOverlayCloseButton)}
            actionItemClassName="btn btn-sm btn-secondary border-0"
-            badgeClassName="badge badge-sm badge-secondary"
            onAlertDismissed={onAlertDismissed}
            getAlertClassName={getAlertClassName}
        />
--- a/client/web/src/components/diff/FileDiffNode.tsx
+++ b/client/web/src/components/diff/FileDiffNode.tsx
@ -9,6 +9,7 @@ import { Observable } from 'rxjs'
 import { ViewerId } from '@sourcegraph/shared/src/api/viewerTypes'
 import { Link } from '@sourcegraph/shared/src/components/Link'
 import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { Badge } from '@sourcegraph/wildcard'

 import { FileDiffFields } from '../../graphql-operations'
 import { DiffMode } from '../../repo/commit/RepositoryCommitPage'
@ -107,12 +108,20 @@ export const FileDiffNode: React.FunctionComponent<FileDiffNodeProps> = ({
                        )}
                    </button>
                    <div className={classNames('align-items-baseline', styles.headerPathStat)}>
-                        {!node.oldPath && <span className="badge badge-success text-uppercase mr-2">Added</span>}
-                        {!node.newPath && <span className="badge badge-danger text-uppercase mr-2">Deleted</span>}
+                        {!node.oldPath && (
+                            <Badge variant="success" className="text-uppercase mr-2">
+                                Added
+                            </Badge>
+                        )}
+                        {!node.newPath && (
+                            <Badge variant="danger" className="text-uppercase mr-2">
+                                Deleted
+                            </Badge>
+                        )}
                        {node.newPath && node.oldPath && node.newPath !== node.oldPath && (
-                            <span className="badge badge-warning text-uppercase mr-2">
+                            <Badge variant="warning" className="text-uppercase mr-2">
                                {dirname(node.newPath) !== dirname(node.oldPath) ? 'Moved' : 'Renamed'}
-                            </span>
+                            </Badge>
                        )}
                        {stat}
                        <Link to={{ ...location, hash: anchor }} className={classNames('ml-2', styles.headerPath)}>
--- a/client/web/src/enterprise/batches/DropdownButton.tsx
+++ b/client/web/src/enterprise/batches/DropdownButton.tsx
@ -1,6 +1,8 @@
 import classNames from 'classnames'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'

+import { ProductStatusBadge } from '@sourcegraph/wildcard'
+
 import styles from './DropdownButton.module.scss'

 export interface Action {
@ -181,7 +183,7 @@ const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({ action, setS
                    {action.experimental && (
                        <>
                            {' '}
-                            <small className="badge badge-info">Experimental</small>
+                            <ProductStatusBadge status="experimental" as="small" />
                        </>
                    )}
                </h4>
--- a/client/web/src/enterprise/batches/detail/BatchChangeDetailsTabs.tsx
+++ b/client/web/src/enterprise/batches/detail/BatchChangeDetailsTabs.tsx
@ -10,7 +10,7 @@ import { ExtensionsControllerProps } from '@sourcegraph/shared/src/extensions/co
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { ThemeProps } from '@sourcegraph/shared/src/theme'
-import { Container } from '@sourcegraph/wildcard'
+import { Badge, Container } from '@sourcegraph/wildcard'

 import { BatchChangeFields } from '../../../graphql-operations'
 import {
@ -82,9 +82,9 @@ export const BatchChangeDetailsTabs: React.FunctionComponent<BatchChangeDetailsT
                    <span className="text-content" data-tab-content="Changesets">
                        Changesets
                    </span>{' '}
-                    <span className="badge badge-pill badge-secondary ml-1">
+                    <Badge variant="secondary" pill={true} className="ml-1">
                        {batchChange.changesetsStats.total - batchChange.changesetsStats.archived}
-                    </span>
+                    </Badge>
                </span>
            </BatchChangeTab>
            <BatchChangeTab index={1} name={TabName.Chart}>
@ -109,9 +109,9 @@ export const BatchChangeDetailsTabs: React.FunctionComponent<BatchChangeDetailsT
                    <span className="text-content" data-tab-content="Archived">
                        Archived
                    </span>{' '}
-                    <span className="badge badge-pill badge-secondary ml-1">
+                    <Badge variant="secondary" pill={true} className="ml-1">
                        {batchChange.changesetsStats.archived}
-                    </span>
+                    </Badge>
                </span>
            </BatchChangeTab>
            <BatchChangeTab index={4} name={TabName.BulkOperations}>
@ -120,9 +120,9 @@ export const BatchChangeDetailsTabs: React.FunctionComponent<BatchChangeDetailsT
                    <span className="text-content" data-tab-content="Bulk operations">
                        Bulk operations
                    </span>{' '}
-                    <span className="badge badge-pill badge-secondary ml-1">
+                    <Badge variant="secondary" pill={true} className="ml-1">
                        {batchChange.bulkOperations.totalCount}
-                    </span>
+                    </Badge>
                </span>
            </BatchChangeTab>
        </BatchChangeTabList>
--- a/client/web/src/enterprise/batches/detail/BatchChangeStateBadge.tsx
+++ b/client/web/src/enterprise/batches/detail/BatchChangeStateBadge.tsx
@ -1,12 +1,22 @@
 import classNames from 'classnames'
 import React from 'react'

+import { Badge } from '@sourcegraph/wildcard'
+
 export const BatchChangeStateBadge: React.FunctionComponent<{ isClosed: boolean; className?: string }> = ({
    isClosed,
    className,
 }) => {
    if (isClosed) {
-        return <span className={classNames('badge badge-danger text-uppercase', className)}>Closed</span>
+        return (
+            <Badge variant="danger" className={classNames('text-uppercase', className)}>
+                Closed
+            </Badge>
+        )
    }
-    return <span className={classNames('badge badge-success text-uppercase', className)}>Open</span>
+    return (
+        <Badge variant="success" className={classNames('text-uppercase', className)}>
+            Open
+        </Badge>
+    )
 }
--- a/client/web/src/enterprise/batches/detail/BatchChangeStatsCard.tsx
+++ b/client/web/src/enterprise/batches/detail/BatchChangeStatsCard.tsx
@ -4,6 +4,7 @@ import ProgressCheckIcon from 'mdi-react/ProgressCheckIcon'
 import React from 'react'

 import { pluralize } from '@sourcegraph/shared/src/util/strings'
+import { Badge } from '@sourcegraph/wildcard'

 import { DiffStatStack } from '../../../components/diff/DiffStat'
 import { BatchChangeFields, ChangesetsStatsFields, DiffStatFields } from '../../../graphql-operations'
@ -105,7 +106,9 @@ export const BatchChangeStatsTotalAction: React.FunctionComponent<{ count: numbe
        )}
    >
        <span className={styles.batchChangeStatsCardChangesetsPill}>
-            <span className="badge badge-pill badge-secondary">{count}</span>
+            <Badge variant="secondary" pill={true}>
+                {count}
+            </Badge>
        </span>
        <span className="text-muted">{pluralize('Changeset', count)}</span>
    </div>
--- a/client/web/src/enterprise/batches/detail/bulk-operations/BulkOperationNode.tsx
+++ b/client/web/src/enterprise/batches/detail/bulk-operations/BulkOperationNode.tsx
@ -11,6 +11,7 @@ import { Link } from '@sourcegraph/shared/src/components/Link'
 import { LinkOrSpan } from '@sourcegraph/shared/src/components/LinkOrSpan'
 import { BulkOperationState, BulkOperationType } from '@sourcegraph/shared/src/graphql-operations'
 import { pluralize } from '@sourcegraph/shared/src/util/strings'
+import { Badge } from '@sourcegraph/wildcard'

 import { ErrorMessage } from '../../../../components/alerts'
 import { Collapsible } from '../../../../components/Collapsible'
@ -65,7 +66,9 @@ export const BulkOperationNode: React.FunctionComponent<BulkOperationNodeProps>
            )}
        >
            <div className={classNames(styles.bulkOperationNodeChangesetCounts, 'text-center')}>
-                <p className="badge badge-secondary mb-2">{node.changesetCount}</p>
+                <Badge variant="secondary" className="mb-2" as="p">
+                    {node.changesetCount}
+                </Badge>
                <p className="mb-0">{pluralize('changeset', node.changesetCount)}</p>
            </div>
            <div className={styles.bulkOperationNodeDivider} />
@ -82,10 +85,14 @@ export const BulkOperationNode: React.FunctionComponent<BulkOperationNodeProps>
                </div>
            )}
            {node.state === BulkOperationState.FAILED && (
-                <span className="badge badge-danger text-uppercase">failed</span>
+                <Badge variant="danger" className="text-uppercase">
+                    failed
+                </Badge>
            )}
            {node.state === BulkOperationState.COMPLETED && (
-                <span className="badge badge-success text-uppercase">complete</span>
+                <Badge variant="success" className="text-uppercase">
+                    complete
+                </Badge>
            )}
        </div>
        {node.errors.length > 0 && (
--- a/client/web/src/enterprise/batches/detail/changesets/ChangesetLabel.tsx
+++ b/client/web/src/enterprise/batches/detail/changesets/ChangesetLabel.tsx
@ -1,6 +1,8 @@
 import classNames from 'classnames'
 import React from 'react'

+import { Badge } from '@sourcegraph/wildcard'
+
 import { ChangesetLabelFields } from '../../../../graphql-operations'

 import styles from './ChangesetLabel.module.scss'
@ -28,16 +30,13 @@ export const ChangesetLabel: React.FunctionComponent<Props> = ({ label }) => {
    const labelBrightness = colorBrightness(label.color)

    return (
-        <span
-            className={classNames(
-                'badge mr-2 badge-secondary',
-                labelBrightness < 127 ? 'text-white' : styles.changesetLabelTextDark
-            )}
-            // eslint-disable-next-line react/forbid-dom-props
+        <Badge
+            variant="secondary"
+            className={classNames('mr-2', labelBrightness < 127 ? 'text-white' : styles.changesetLabelTextDark)}
            style={{ backgroundColor: '#' + label.color }}
-            data-tooltip={label.description}
+            tooltip={label.description || undefined}
        >
            {label.text}
-        </span>
+        </Badge>
    )
 }
--- a/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetInfoCell.tsx
+++ b/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetInfoCell.tsx
@ -2,6 +2,7 @@ import classNames from 'classnames'
 import React from 'react'

 import { Link } from '@sourcegraph/shared/src/components/Link'
+import { Badge } from '@sourcegraph/wildcard'

 import { ExternalChangesetFields, ChangesetState } from '../../../../graphql-operations'

@ -53,7 +54,9 @@ export const ExternalChangesetInfoCell: React.FunctionComponent<ExternalChangese
                    </Link>{' '}
                    {hasHeadReference(node) && (
                        <div className="d-block d-sm-inline-block">
-                            <span className="badge badge-secondary text-monospace">{headReference(node)}</span>
+                            <Badge variant="secondary" className="text-monospace">
+                                {headReference(node)}
+                            </Badge>
                        </div>
                    )}
                </span>
--- a/client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx
+++ b/client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx
@ -34,7 +34,7 @@ import {
 } from '@sourcegraph/web/src/components/FilteredConnection'
 import { LogOutput } from '@sourcegraph/web/src/components/LogOutput'
 import { Timeline, TimelineStage } from '@sourcegraph/web/src/components/Timeline'
-import { Container, PageHeader, Tab, TabList, TabPanel, TabPanels, Tabs } from '@sourcegraph/wildcard'
+import { Badge, Container, PageHeader, Tab, TabList, TabPanel, TabPanels, Tabs } from '@sourcegraph/wildcard'

 import { BatchChangesIcon } from '../../../batches/icons'
 import { ErrorAlert } from '../../../components/alerts'
@ -324,7 +324,7 @@ const WorkspaceNode: React.FunctionComponent<WorkspaceNodeProps> = ({ node, sele
            </div>
            {/* Only display the branch if it's not the default branch. */}
            {node.repository.defaultBranch?.abbrevName !== node.branch.abbrevName && (
-                <span className="badge badge-secondary">{node.branch.abbrevName}</span>
+                <Badge variant="secondary">{node.branch.abbrevName}</Badge>
            )}
        </Link>
    </li>
@ -495,8 +495,8 @@ const ChangesetSpecNode: React.FunctionComponent<{ node: BatchSpecWorkspaceChang
                    <Link to={node.description.baseRepository.url}>{node.description.baseRepository.name}</Link>
                </p>
                <p>
-                    <span className="badge badge-secondary">{node.description.baseRef}</span> &larr;
-                    <span className="badge badge-secondary">{node.description.headRef}</span>
+                    <Badge variant="secondary">{node.description.baseRef}</Badge> &larr;
+                    <Badge variant="secondary">{node.description.headRef}</Badge>
                </p>
                <p>
                    <strong>Published:</strong> <PublishedValue published={node.description.published} />
@ -897,10 +897,10 @@ const BatchSpecStateBadge: React.FunctionComponent<{ state: BatchSpecState }> =
        case BatchSpecState.PROCESSING:
        case BatchSpecState.CANCELED:
        case BatchSpecState.CANCELING:
-            return <span className="badge badge-secondary">{state}</span>
+            return <Badge variant="secondary">{state}</Badge>
        case BatchSpecState.FAILED:
-            return <span className="badge badge-danger">{state}</span>
+            return <Badge variant="danger">{state}</Badge>
        case BatchSpecState.COMPLETED:
-            return <span className="badge badge-success">{state}</span>
+            return <Badge variant="success">{state}</Badge>
    }
 }
--- a/client/web/src/enterprise/batches/list/BatchChangeNode.tsx
+++ b/client/web/src/enterprise/batches/list/BatchChangeNode.tsx
@ -4,6 +4,7 @@ import React from 'react'
 import { Link } from '@sourcegraph/shared/src/components/Link'
 import { Markdown } from '@sourcegraph/shared/src/components/Markdown'
 import { renderMarkdown } from '@sourcegraph/shared/src/util/markdown'
+import { Badge } from '@sourcegraph/wildcard'

 import { Timestamp } from '../../../components/time/Timestamp'
 import { ListBatchChange } from '../../../graphql-operations'
@ -33,10 +34,14 @@ export const BatchChangeNode: React.FunctionComponent<BatchChangeNodeProps> = ({
    <>
        <span className={styles.batchChangeNodeSeparator} />
        {!node.closedAt && (
-            <span className={classNames(styles.batchChangeNodeBadge, 'badge badge-success text-uppercase')}>Open</span>
+            <Badge variant="success" className={classNames(styles.batchChangeNodeBadge, 'text-uppercase')}>
+                Open
+            </Badge>
        )}
        {node.closedAt && (
-            <span className={classNames(styles.batchChangeNodeBadge, 'badge badge-danger text-uppercase')}>Closed</span>
+            <Badge variant="danger" className={classNames(styles.batchChangeNodeBadge, 'text-uppercase')}>
+                Closed
+            </Badge>
        )}
        <div className={styles.batchChangeNodeContent}>
            <div className="m-0 d-md-flex d-block align-items-baseline">
--- a/client/web/src/enterprise/batches/preview/BatchChangePreviewStatsBar.tsx
+++ b/client/web/src/enterprise/batches/preview/BatchChangePreviewStatsBar.tsx
@ -2,6 +2,7 @@ import classNames from 'classnames'
 import React, { useContext, useMemo } from 'react'

 import { useObservable } from '@sourcegraph/shared/src/util/useObservable'
+import { Badge } from '@sourcegraph/wildcard'

 import { DiffStatStack } from '../../../components/diff/DiffStat'
 import { ApplyPreviewStatsFields, DiffStatFields, Scalars } from '../../../graphql-operations'
@ -56,7 +57,9 @@ export const BatchChangePreviewStatsBar: React.FunctionComponent<BatchChangePrev
    return (
        <div className="d-flex flex-wrap mb-3 align-items-center">
            <h2 className="m-0 align-self-center">
-                <span className="badge badge-info text-uppercase mb-0">Preview</span>
+                <Badge variant="info" className="text-uppercase mb-0">
+                    Preview
+                </Badge>
            </h2>
            <div className={classNames(styles.batchChangePreviewStatsBarDivider, 'd-none d-sm-block mx-3')} />
            <DiffStatStack className={styles.batchChangePreviewStatsBarDiff} {...diffStat} />
--- a/client/web/src/enterprise/batches/preview/BatchChangePreviewTabs.tsx
+++ b/client/web/src/enterprise/batches/preview/BatchChangePreviewTabs.tsx
@ -5,7 +5,7 @@ import React from 'react'

 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { ThemeProps } from '@sourcegraph/shared/src/theme'
-import { Container } from '@sourcegraph/wildcard'
+import { Badge, Container } from '@sourcegraph/wildcard'

 import { BatchSpecFields } from '../../../graphql-operations'
 import {
@ -61,7 +61,9 @@ export const BatchChangePreviewTabs: React.FunctionComponent<BatchChangePreviewT
                    <span className="text-content" data-tab-content="Preview changesets">
                        Preview changesets
                    </span>{' '}
-                    <span className="badge badge-pill badge-secondary ml-1">{spec.applyPreview.totalCount}</span>
+                    <Badge variant="secondary" pill={true} className="ml-1">
+                        {spec.applyPreview.totalCount}
+                    </Badge>
                </span>
            </BatchChangeTab>
            <BatchChangeTab index={1} name="spec">
--- a/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.tsx
+++ b/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.tsx
@ -12,6 +12,7 @@ import { Link } from '@sourcegraph/shared/src/components/Link'
 import { Maybe } from '@sourcegraph/shared/src/graphql-operations'
 import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { InputTooltip } from '@sourcegraph/web/src/components/InputTooltip'
+import { Badge } from '@sourcegraph/wildcard'

 import { DiffStatStack } from '../../../../components/diff/DiffStat'
 import { ChangesetState, VisibleChangesetApplyPreviewFields } from '../../../../graphql-operations'
@ -515,12 +516,12 @@ const References: React.FunctionComponent<{ spec: VisibleChangesetApplyPreviewFi
            {spec.delta.baseRefChanged &&
                spec.targets.__typename === 'VisibleApplyPreviewTargetsUpdate' &&
                spec.targets.changeset.currentSpec?.description.__typename === 'GitBranchChangesetDescription' && (
-                    <del className="badge badge-danger mr-2">
+                    <Badge variant="danger" className="mr-2" as="del">
                        {spec.targets.changeset.currentSpec?.description.baseRef}
-                    </del>
+                    </Badge>
                )}
-            <span className="badge badge-primary">{spec.targets.changesetSpec.description.baseRef}</span> &larr;{' '}
-            <span className="badge badge-primary">{spec.targets.changesetSpec.description.headRef}</span>
+            <Badge variant="primary">{spec.targets.changesetSpec.description.baseRef}</Badge> &larr;{' '}
+            <Badge variant="primary">{spec.targets.changesetSpec.description.headRef}</Badge>
        </div>
    )
 }
--- a/client/web/src/enterprise/batches/settings/CodeHostConnectionNode.tsx
+++ b/client/web/src/enterprise/batches/settings/CodeHostConnectionNode.tsx
@ -4,6 +4,8 @@ import CheckCircleOutlineIcon from 'mdi-react/CheckCircleOutlineIcon'
 import React, { useCallback, useState } from 'react'
 import { Subject } from 'rxjs'

+import { Badge } from '@sourcegraph/wildcard'
+
 import { defaultExternalServices } from '../../../components/externalServices/externalServices'
 import { BatchChangesCodeHostFields, Scalars } from '../../../graphql-operations'

@ -78,13 +80,13 @@ export const CodeHostConnectionNode: React.FunctionComponent<CodeHostConnectionN
                        )}
                        <Icon className="icon-inline mx-2" /> {node.externalServiceURL}{' '}
                        {!isEnabled && node.credential?.isSiteCredential && (
-                            <span
-                                className="badge badge-secondary"
-                                data-tooltip="Changesets on this code host will
+                            <Badge
+                                variant="secondary"
+                                tooltip="Changesets on this code host will
                            be created with a global token until a personal access token is added."
                            >
                                Global token
-                            </span>
+                            </Badge>
                        )}
                    </h3>
                    <div className="mb-0 d-flex justify-content-end flex-grow-1">
--- a/client/web/src/enterprise/codeintel/configuration/components/GitObjectPreview.tsx
+++ b/client/web/src/enterprise/codeintel/configuration/components/GitObjectPreview.tsx
@ -3,7 +3,7 @@ import classNames from 'classnames'
 import React, { FunctionComponent } from 'react'

 import { ErrorAlert } from '@sourcegraph/web/src/components/alerts'
-import { LoadingSpinner } from '@sourcegraph/wildcard'
+import { Badge, LoadingSpinner } from '@sourcegraph/wildcard'

 import { GitObjectType } from '../../../../graphql-operations'
 import { GitObjectPreviewResult, usePreviewGitObjectFilter } from '../hooks/usePreviewGitObjectFilter'
@ -114,7 +114,9 @@ const GitObjectPreview: FunctionComponent<GitObjectPreviewProps> = ({
                                    <span>{tag.repoName}</span>
                                    <span className="search-filter-keyword">@</span>
                                    <span>{tag.name}</span>
-                                    <span className="badge badge-info ml-4">{tag.rev.slice(0, 7)}</span>
+                                    <Badge variant="info" className="ml-4">
+                                        {tag.rev.slice(0, 7)}
+                                    </Badge>
                                </p>
                            ))}
                        </div>
--- a/client/web/src/enterprise/executors/ExecutorsListPage.tsx
+++ b/client/web/src/enterprise/executors/ExecutorsListPage.tsx
@ -13,7 +13,7 @@ import {
 } from '@sourcegraph/web/src/components/FilteredConnection'
 import { PageTitle } from '@sourcegraph/web/src/components/PageTitle'
 import { Timestamp } from '@sourcegraph/web/src/components/time/Timestamp'
-import { Container, PageHeader } from '@sourcegraph/wildcard'
+import { Badge, Container, PageHeader } from '@sourcegraph/wildcard'

 import { ExecutorFields } from '../../graphql-operations'
 import { eventLogger } from '../../tracking/eventLogger'
@ -138,12 +138,12 @@ export const ExecutorNode: FunctionComponent<ExecutorNodeProps> = ({ node }) =>
                                />
                            )}
                            {node.hostname}{' '}
-                            <span
-                                className="badge badge-secondary"
-                                data-tooltip={`The executor is configured to pull data from the queue "${node.queueName}"`}
+                            <Badge
+                                variant="secondary"
+                                tooltip={`The executor is configured to pull data from the queue "${node.queueName}"`}
                            >
                                {node.queueName}
-                            </span>
+                            </Badge>
                        </h4>
                    </div>
                    <span>
--- a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/add-insight-modal/components/add-insight-modal-content/AddInsightModalContent.tsx
+++ b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/add-insight-modal/components/add-insight-modal-content/AddInsightModalContent.tsx
@ -12,7 +12,7 @@ import { useCheckboxes } from '../../../../../../../components/form/hooks/useChe
 import { useField } from '../../../../../../../components/form/hooks/useField'
 import { SubmissionErrors, useForm, FORM_ERROR } from '../../../../../../../components/form/hooks/useForm'
 import { ReachableInsight } from '../../../../../../../core/backend/code-insights-backend-types'
-import { Badge } from '../../../dashboard-select/components/badge/Badge'
+import { InsightsBadge } from '../../../dashboard-select/components/insights-badge/InsightsBadge'
 import { TruncatedText } from '../../../dashboard-select/components/trancated-text/TrancatedText'

 import styles from './AddInsightModalContent.module.scss'
@ -80,7 +80,7 @@ export const AddInsightModalContent: React.FunctionComponent<AddInsightModalCont

                        <TruncatedText>{insight.title}</TruncatedText>
                        {insight.owner.name.length > 0 && (
-                            <Badge value={insight.owner.name} className={styles.insightOwnerName} />
+                            <InsightsBadge value={insight.owner.name} className={styles.insightOwnerName} />
                        )}
                    </label>
                ))}
--- a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/badge/Badge.tsx
+++ b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/badge/Badge.tsx
@ -1,21 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-
-import { TruncatedText } from '../trancated-text/TrancatedText'
-
-import styles from './Badge.module.scss'
-
-interface BadgeProps {
-    value: string
-    className?: string
-}
-
-export const Badge: React.FunctionComponent<BadgeProps> = props => {
-    const { value, className } = props
-
-    return (
-        <TruncatedText title={value} className={classNames(styles.badge, 'badge', 'badge-secondary', className)}>
-            {value}
-        </TruncatedText>
-    )
-}
--- a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/insights-badge/InsightsBadge.module.scss
+++ b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/insights-badge/InsightsBadge.module.scss
@ -7,4 +7,6 @@
    To avoid visual merging/overlapping here, we use non-standard
   */
    --badge-base: var(--color-bg-2) !important;
+    display: inline-block;
+    text-transform: none;
 }
--- a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/insights-badge/InsightsBadge.tsx
+++ b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/insights-badge/InsightsBadge.tsx
@ -0,0 +1,32 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import { Badge } from '@sourcegraph/wildcard'
+
+import truncatedStyles from '../trancated-text/TruncatedText.module.scss'
+
+import styles from './InsightsBadge.module.scss'
+
+interface BadgeProps {
+    value: string
+    className?: string
+}
+
+/**
+ * A wrapper around the Wildcard badge component with some slightly different styling.
+ * We can't use the standard "secondary" variant here because the selected select option
+ * already uses this color for the background. We use this style variant to avoid visual merging/overlapping.
+ */
+export const InsightsBadge: React.FunctionComponent<BadgeProps> = props => {
+    const { value, className } = props
+
+    return (
+        <Badge
+            title={value}
+            variant="secondary"
+            className={classNames(styles.badge, truncatedStyles.truncatedText, className)}
+        >
+            {value}
+        </Badge>
+    )
+}
--- a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/menu-button/MenuButton.tsx
+++ b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/menu-button/MenuButton.tsx
@ -6,7 +6,7 @@ import React from 'react'

 import { InsightDashboard, isRealDashboard } from '../../../../../../../core/types'
 import { getDashboardOwnerName, getDashboardTitle } from '../../helpers/get-dashboard-title'
-import { Badge } from '../badge/Badge'
+import { InsightsBadge } from '../insights-badge/InsightsBadge'
 import { TruncatedText } from '../trancated-text/TrancatedText'

 import styles from './MenuButton.module.scss'
@ -57,7 +57,7 @@ const MenuButtonContent: React.FunctionComponent<MenuButtonContentProps> = props
        <>
            <span className={styles.text}>
                <TruncatedText title={title}>{title}</TruncatedText>
-                {badge && <Badge value={badge} className={classNames('ml-1 mr-1', styles.badge)} />}
+                {badge && <InsightsBadge value={badge} className={classNames('ml-1 mr-1', styles.badge)} />}
            </span>

            <ListboxButtonIcon className={styles.expandedIcon} />
--- a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/select-option/SelectOption.tsx
+++ b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/select-option/SelectOption.tsx
@ -4,7 +4,7 @@ import React from 'react'

 import { RealInsightDashboard } from '../../../../../../../core/types'
 import { getDashboardOwnerName, getDashboardTitle } from '../../helpers/get-dashboard-title'
-import { Badge } from '../badge/Badge'
+import { InsightsBadge } from '../insights-badge/InsightsBadge'
 import { TruncatedText } from '../trancated-text/TrancatedText'

 import styles from './SelectOption.module.scss'
@ -33,7 +33,7 @@ export const SelectOption: React.FunctionComponent<SelectOptionProps> = props =>
            <TruncatedText title={label} className={styles.text}>
                {label}
            </TruncatedText>
-            {badge && <Badge value={badge} className={styles.badge} />}
+            {badge && <InsightsBadge value={badge} className={styles.badge} />}
        </ListboxOption>
    )
 }
--- a/client/web/src/enterprise/insights/pages/dashboards/edit-dashboard/EditDashobardPage.tsx
+++ b/client/web/src/enterprise/insights/pages/dashboards/edit-dashboard/EditDashobardPage.tsx
@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'

 import { asError } from '@sourcegraph/shared/src/util/errors'
 import { useObservable } from '@sourcegraph/shared/src/util/useObservable'
-import { Button, Container, LoadingSpinner, PageHeader } from '@sourcegraph/wildcard'
+import { Badge, Button, Container, LoadingSpinner, PageHeader } from '@sourcegraph/wildcard'

 import { AuthenticatedUser } from '../../../../../auth'
 import { HeroPage } from '../../../../../components/HeroPage'
@ -65,9 +65,11 @@ export const EditDashboardPage: React.FunctionComponent<EditDashboardPageProps>
                title="Oops, we couldn't find the dashboard"
                subtitle={
                    <span>
-                        We couldn't find that dashboard. Try to find the dashboard with ID:{' '}
-                        <code className="badge badge-secondary">{dashboardId}</code> in your{' '}
-                        <Link to={`/users/${authenticatedUser?.username}/settings`}>user or org settings</Link>
+                        We couldn't find that dashboard. Try to find the dashboard with ID:
+                        <Badge variant="secondary" as="code">
+                            {dashboardId}
+                        </Badge>{' '}
+                        in your <Link to={`/users/${authenticatedUser?.username}/settings`}>user or org settings</Link>
                    </span>
                }
            />
--- a/client/web/src/enterprise/insights/pages/insights/edit-insight/EditInsightPage.tsx
+++ b/client/web/src/enterprise/insights/pages/insights/edit-insight/EditInsightPage.tsx
@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'

 import { LoadingSpinner } from '@sourcegraph/react-loading-spinner'
 import { useObservable } from '@sourcegraph/shared/src/util/useObservable'
+import { Badge } from '@sourcegraph/wildcard'

 import { AuthenticatedUser } from '../../../../../auth'
 import { HeroPage } from '../../../../../components/HeroPage'
@ -51,8 +52,10 @@ export const EditInsightPage: React.FunctionComponent<EditInsightPageProps> = pr
                subtitle={
                    <span>
                        We couldn't find that insight. Try to find the insight with ID:{' '}
-                        <code className="badge badge-secondary">{insightID}</code> in your{' '}
-                        <Link to={`/users/${authenticatedUser?.username}/settings`}>user or org settings</Link>
+                        <Badge variant="secondary" as="code">
+                            {insightID}
+                        </Badge>{' '}
+                        in your <Link to={`/users/${authenticatedUser?.username}/settings`}>user or org settings</Link>
                    </span>
                }
            />
--- a/client/web/src/enterprise/productSubscription/ProductLicenseTags.tsx
+++ b/client/web/src/enterprise/productSubscription/ProductLicenseTags.tsx
@ -1,13 +1,15 @@
 import React from 'react'

+import { Badge } from '@sourcegraph/wildcard'
+
 export const ProductLicenseTags: React.FunctionComponent<{
    tags: string[]
 }> = ({ tags }) => (
    <>
        {tags.map(tag => (
-            <div className="mr-1 badge badge-secondary" key={tag}>
+            <Badge variant="secondary" className="mr-1" key={tag} as="div">
                {tag}
-            </div>
+            </Badge>
        ))}
    </>
 )
--- a/client/web/src/enterprise/search/stats/SearchStatsPage.tsx
+++ b/client/web/src/enterprise/search/stats/SearchStatsPage.tsx
@ -8,6 +8,7 @@ import { Form } from '@sourcegraph/branded/src/components/Form'
 import { LoadingSpinner } from '@sourcegraph/react-loading-spinner'
 import { asError, isErrorLike, ErrorLike } from '@sourcegraph/shared/src/util/errors'
 import { useObservable } from '@sourcegraph/shared/src/util/useObservable'
+import { Badge } from '@sourcegraph/wildcard'

 import { querySearchResultsStats } from './backend'
 import { SearchStatsLanguages } from './SearchStatsLanguages'
@ -57,7 +58,9 @@ export const SearchStatsPage: React.FunctionComponent<Props> = ({
            <header className="d-flex align-items-center justify-content-between mb-3">
                <h2 className="d-flex align-items-center mb-0">
                    <ChartLineIcon className="icon-inline mr-2" /> Code statistics{' '}
-                    <small className="badge badge-secondary text-uppercase ml-2">Experimental</small>
+                    <Badge variant="secondary" className="text-uppercase ml-2" as="small">
+                        Experimental
+                    </Badge>
                </h2>
            </header>
            <Form onSubmit={onSubmit} className="form">
--- a/client/web/src/enterprise/search/stats/snapshots/SearchStatsPage.test.tsx.snap
+++ b/client/web/src/enterprise/search/stats/snapshots/SearchStatsPage.test.tsx.snap
@ -24,7 +24,7 @@ exports[`SearchStatsPage limitHit 1`] = `
        </svg>
         Code statistics 
        <small
-          class="badge badge-secondary text-uppercase ml-2"
+          class="badge secondary text-uppercase ml-2"
        >
          Experimental
        </small>
@ -89,7 +89,7 @@ exports[`SearchStatsPage renders 1`] = `
        </svg>
         Code statistics 
        <small
-          class="badge badge-secondary text-uppercase ml-2"
+          class="badge secondary text-uppercase ml-2"
        >
          Experimental
        </small>
--- a/client/web/src/enterprise/searchContexts/SearchContextNode.tsx
+++ b/client/web/src/enterprise/searchContexts/SearchContextNode.tsx
@ -4,6 +4,7 @@ import React from 'react'

 import { Link } from '@sourcegraph/shared/src/components/Link'
 import { Timestamp } from '@sourcegraph/web/src/components/time/Timestamp'
+import { Badge } from '@sourcegraph/wildcard'

 import { SearchContextFields } from '../../graphql-operations'

@ -24,7 +25,11 @@ export const SearchContextNode: React.FunctionComponent<SearchContextNodeProps>
                <Link to={`/contexts/${node.spec}`}>
                    <strong>{node.spec}</strong>
                </Link>
-                {!node.public && <div className="badge badge-pill badge-secondary ml-1">Private</div>}
+                {!node.public && (
+                    <Badge variant="secondary" pill={true} className="ml-1" as="div">
+                        Private
+                    </Badge>
+                )}
            </div>

            {node.description.length > 0 && (
--- a/client/web/src/enterprise/searchContexts/SearchContextPage.tsx
+++ b/client/web/src/enterprise/searchContexts/SearchContextPage.tsx
@ -18,7 +18,7 @@ import { useObservable } from '@sourcegraph/shared/src/util/useObservable'
 import { Page } from '@sourcegraph/web/src/components/Page'
 import { PageTitle } from '@sourcegraph/web/src/components/PageTitle'
 import { Timestamp } from '@sourcegraph/web/src/components/time/Timestamp'
-import { Container, PageHeader } from '@sourcegraph/wildcard'
+import { Badge, Container, PageHeader } from '@sourcegraph/wildcard'

 import { SearchContextProps } from '../../search'

@ -168,14 +168,17 @@ export const SearchContextPage: React.FunctionComponent<SearchContextPageProps>
                                            <div className="d-flex align-items-center">
                                                <span>{searchContextOrError.spec}</span>
                                                {!searchContextOrError.public && (
-                                                    <div
+                                                    <Badge
+                                                        variant="secondary"
+                                                        pill={true}
                                                        className={classNames(
-                                                            'badge badge-pill badge-secondary ml-2',
+                                                            'ml-2',
                                                            styles.searchContextPagePrivateBadge
                                                        )}
+                                                        as="div"
                                                    >
                                                        Private
-                                                    </div>
+                                                    </Badge>
                                                )}
                                            </div>
                                        ),
--- a/client/web/src/enterprise/searchContexts/SearchContextsListTab.tsx
+++ b/client/web/src/enterprise/searchContexts/SearchContextsListTab.tsx
@ -10,6 +10,7 @@ import {
    FilteredConnectionFilter,
    FilteredConnectionFilterValue,
 } from '@sourcegraph/web/src/components/FilteredConnection'
+import { Badge } from '@sourcegraph/wildcard'

 import { AuthenticatedUser } from '../../auth'
 import {
@ -169,12 +170,14 @@ export const SearchContextsListTab: React.FunctionComponent<SearchContextsListTa
                                <Link to={`/contexts/${context.spec}`}>
                                    <strong>{context.spec}</strong>
                                </Link>
-                                <span
-                                    className={classNames('badge badge-pill badge-secondary ml-1', styles.badge)}
-                                    data-tooltip="Automatic contexts are created by Sourcegraph."
+                                <Badge
+                                    variant="secondary"
+                                    pill={true}
+                                    className={classNames('ml-1', styles.badge)}
+                                    tooltip="Automatic contexts are created by Sourcegraph."
                                >
                                    auto
-                                </span>
+                                </Badge>
                            </div>
                            <div className="text-muted mt-1">{context.description}</div>
                        </div>
--- a/client/web/src/enterprise/site-admin/SiteAdminAuthenticationProvidersPage.tsx
+++ b/client/web/src/enterprise/site-admin/SiteAdminAuthenticationProvidersPage.tsx
@ -6,6 +6,7 @@ import { map } from 'rxjs/operators'
 import { gql } from '@sourcegraph/shared/src/graphql/graphql'
 import * as GQL from '@sourcegraph/shared/src/graphql/schema'
 import { createAggregateError } from '@sourcegraph/shared/src/util/errors'
+import { Badge } from '@sourcegraph/wildcard'

 import { queryGraphQL } from '../../backend/graphql'
 import { FilteredConnection } from '../../components/FilteredConnection'
@ -27,7 +28,7 @@ class AuthProviderNode extends React.PureComponent<AuthProviderNodeProps> {
                <div className="d-flex align-items-center justify-content-between">
                    <div className="mr-2">
                        <strong>{this.props.node.displayName}</strong>{' '}
-                        <span className="badge badge-secondary">{this.props.node.serviceType}</span>
+                        <Badge variant="secondary">{this.props.node.serviceType}</Badge>
                        <br />
                        {(this.props.node.serviceID || this.props.node.clientID) && (
                            <small className="text-muted">
--- a/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/snapshots/SiteAdminProductLicenseNode.test.tsx.snap
+++ b/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/snapshots/SiteAdminProductLicenseNode.test.tsx.snap
@ -60,7 +60,7 @@ exports[`SiteAdminProductLicenseNode active 1`] = `
    <div>
      Tags: 
      <div
-        class="mr-1 badge badge-secondary"
+        class="badge secondary mr-1"
      >
        a
      </div>
@ -159,7 +159,7 @@ exports[`SiteAdminProductLicenseNode inactive 1`] = `
    <div>
      Tags: 
      <div
-        class="mr-1 badge badge-secondary"
+        class="badge secondary mr-1"
      >
        a
      </div>
--- a/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/snapshots/SiteAdminProductSubscriptionPage.test.tsx.snap
+++ b/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/snapshots/SiteAdminProductSubscriptionPage.test.tsx.snap
@ -216,7 +216,7 @@ exports[`SiteAdminProductSubscriptionPage renders 1`] = `
            <div>
              Tags: 
              <div
-                class="mr-1 badge badge-secondary"
+                class="badge secondary mr-1"
              >
                a
              </div>
--- a/client/web/src/enterprise/user/settings/ExternalAccountNode.tsx
+++ b/client/web/src/enterprise/user/settings/ExternalAccountNode.tsx
@ -5,6 +5,7 @@ import { catchError, filter, map, mapTo, startWith, switchMap, tap } from 'rxjs/

 import { dataOrThrowErrors, gql } from '@sourcegraph/shared/src/graphql/graphql'
 import { asError, ErrorLike, isErrorLike } from '@sourcegraph/shared/src/util/errors'
+import { Badge } from '@sourcegraph/wildcard'

 import { requestGraphQL } from '../../../backend/graphql'
 import { ErrorAlert } from '../../../components/alerts'
@ -132,8 +133,7 @@ export class ExternalAccountNode extends React.PureComponent<ExternalAccountNode
                                &mdash;{' '}
                            </>
                        )}
-                        <span className="badge badge-secondary">{this.props.node.serviceType}</span>{' '}
-                        {this.props.node.accountID}
+                        <Badge variant="secondary">{this.props.node.serviceType}</Badge> {this.props.node.accountID}
                        {(this.props.node.serviceID || this.props.node.clientID) && (
                            <small className="text-muted">
                                <br />
--- a/client/web/src/extensions/components/StatusBar.tsx
+++ b/client/web/src/extensions/components/StatusBar.tsx
@ -13,6 +13,7 @@ import { haveInitialExtensionsLoaded } from '@sourcegraph/shared/src/api/feature
 import { ButtonLink } from '@sourcegraph/shared/src/components/LinkOrButton'
 import { ExtensionsControllerProps } from '@sourcegraph/shared/src/extensions/controller'
 import { useObservable } from '@sourcegraph/shared/src/util/useObservable'
+import { Badge } from '@sourcegraph/wildcard'

 import { ErrorBoundary } from '../../components/ErrorBoundary'
 import { useCarousel } from '../../components/useCarousel'
@ -114,7 +115,11 @@ export const StatusBar: React.FunctionComponent<StatusBarProps> = ({
                    </button>
                )}
                <div className={classNames('d-flex align-items-center px-2', styles.items)} ref={carouselReference}>
-                    {badgeText && <p className="badge badge-secondary m-0">{badgeText}</p>}
+                    {badgeText && (
+                        <Badge variant="secondary" className="m-0" as="p">
+                            {badgeText}
+                        </Badge>
+                    )}
                    {!!statusBarItems && statusBarItems !== 'loading' && statusBarItems.length > 0
                        ? statusBarItems.map(statusBarItem => (
                              <StatusBarItem
--- a/client/web/src/nav/snapshots/GlobalNavbar.test.tsx.snap
+++ b/client/web/src/nav/snapshots/GlobalNavbar.test.tsx.snap
@ -119,7 +119,7 @@ exports[`GlobalNavbar default 1`] = `
              >
                Contexts 
                <span
-                  class="badge badge badge-info productStatusBadge ml-1"
+                  class="badge info productStatusBadge ml-1"
                  status="new"
                >
                  new
@ -172,7 +172,7 @@ exports[`GlobalNavbar default 1`] = `
              >
                Contexts 
                <span
-                  class="badge badge badge-info productStatusBadge ml-1"
+                  class="badge info productStatusBadge ml-1"
                  status="new"
                >
                  new
@ -395,7 +395,7 @@ exports[`GlobalNavbar low-profile 1`] = `
              >
                Contexts 
                <span
-                  class="badge badge badge-info productStatusBadge ml-1"
+                  class="badge info productStatusBadge ml-1"
                  status="new"
                >
                  new
@ -448,7 +448,7 @@ exports[`GlobalNavbar low-profile 1`] = `
              >
                Contexts 
                <span
-                  class="badge badge badge-info productStatusBadge ml-1"
+                  class="badge info productStatusBadge ml-1"
                  status="new"
                >
                  new
--- a/client/web/src/repo/GitReference.tsx
+++ b/client/web/src/repo/GitReference.tsx
@ -8,6 +8,7 @@ import { gql } from '@sourcegraph/shared/src/graphql/graphql'
 import { createAggregateError } from '@sourcegraph/shared/src/util/errors'
 import { memoizeObservable } from '@sourcegraph/shared/src/util/memoizeObservable'
 import { numberWithCommas } from '@sourcegraph/shared/src/util/strings'
+import { Badge } from '@sourcegraph/wildcard'

 import { requestGraphQL } from '../backend/graphql'
 import { Timestamp } from '../components/time/Timestamp'
@ -67,7 +68,7 @@ export const GitReferenceNode: React.FunctionComponent<GitReferenceNodeProps> =
        >
            <span className="d-flex align-items-center">
                {Icon && <Icon className="icon-inline mr-1" />}
-                <code className="badge">{node.displayName}</code>
+                <Badge as="code">{node.displayName}</Badge>
                {mostRecentSig && (
                    <small className="pl-2">
                        Updated <Timestamp date={mostRecentSig.date} />{' '}
--- a/client/web/src/repo/RevisionsPopover/RevisionsPopoverCommits.tsx
+++ b/client/web/src/repo/RevisionsPopover/RevisionsPopoverCommits.tsx
@ -7,7 +7,7 @@ import { Scalars } from '@sourcegraph/shared/src/graphql-operations'
 import { dataOrThrowErrors, gql } from '@sourcegraph/shared/src/graphql/graphql'
 import { useConnection } from '@sourcegraph/web/src/components/FilteredConnection/hooks/useConnection'
 import { ConnectionSummary } from '@sourcegraph/web/src/components/FilteredConnection/ui'
-import { useDebounce } from '@sourcegraph/wildcard'
+import { Badge, useDebounce } from '@sourcegraph/wildcard'

 import {
    GitCommitAncestorFields,
@ -88,9 +88,9 @@ const GitCommitNode: React.FunctionComponent<GitCommitNodeProps> = ({
                className={styles.link}
                onClick={onClick}
            >
-                <code className="badge" title={node.oid}>
+                <Badge title={node.oid} as="code">
                    {node.abbreviatedOID}
-                </code>
+                </Badge>
                <small className={styles.message}>{node.subject.slice(0, 200)}</small>
            </ConnectionPopoverNodeLink>
        </ConnectionPopoverNode>
--- a/client/web/src/search/home/LoggedOutHomepage.tsx
+++ b/client/web/src/search/home/LoggedOutHomepage.tsx
@ -5,6 +5,7 @@ import React, { useCallback } from 'react'
 import { Link } from '@sourcegraph/shared/src/components/Link'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { Badge } from '@sourcegraph/wildcard'

 import { communitySearchContextsList } from '../../communitySearchContexts/HomepageConfig'
 import { SyntaxHighlightedSearchQuery } from '../../components/SyntaxHighlightedSearchQuery'
@ -118,7 +119,9 @@ export const LoggedOutHomepage: React.FunctionComponent<LoggedOutHomepageProps>
                <div className="d-flex justify-content-center">
                    <div className={classNames('card', styles.ctaCard)}>
                        <div className="d-flex align-items-center">
-                            <span className="badge badge-merged text-uppercase mr-2">Beta</span>
+                            <Badge variant="merged" className="text-uppercase mr-2">
+                                Beta
+                            </Badge>
                        </div>
                        <span>
                            Search your public and private code.{' '}
--- a/client/web/src/search/input/SearchContextMenu.tsx
+++ b/client/web/src/search/input/SearchContextMenu.tsx
@ -17,6 +17,7 @@ import { Link } from '@sourcegraph/shared/src/components/Link'
 import { ISearchContext } from '@sourcegraph/shared/src/graphql/schema'
 import { asError, isErrorLike } from '@sourcegraph/shared/src/util/errors'
 import { useObservable } from '@sourcegraph/shared/src/util/useObservable'
+import { Badge } from '@sourcegraph/wildcard'

 import { SearchContextInputProps } from '..'
 import { AuthenticatedUser } from '../../auth'
@ -59,7 +60,9 @@ export const SearchContextMenuItem: React.FunctionComponent<{
                {description}
            </small>
            {isDefault && (
-                <span className={classNames('badge badge-secondary text-uppercase', styles.itemDefault)}>Default</span>
+                <Badge variant="secondary" className={classNames('text-uppercase', styles.itemDefault)}>
+                    Default
+                </Badge>
            )}
        </DropdownItem>
    )
--- a/client/web/src/site-admin/SiteAdminSurveyResponsesPage.tsx
+++ b/client/web/src/site-admin/SiteAdminSurveyResponsesPage.tsx
@ -6,6 +6,8 @@ import { Link } from 'react-router-dom'
 import { Subscription } from 'rxjs'

 import { useLocalStorage } from '@sourcegraph/shared/src/util/useLocalStorage'
+import { Badge } from '@sourcegraph/wildcard'
+import { BADGE_VARIANTS } from '@sourcegraph/wildcard/src/components/Badge/constants'

 import { FilteredConnection } from '../components/FilteredConnection'
 import { PageTitle } from '../components/PageTitle'
@ -36,17 +38,14 @@ interface SurveyResponseNodeProps {

 interface SurveyResponseNodeState {}

-function scoreToClassSuffix(score: number): string {
+function scoreToClassSuffix(score: number): typeof BADGE_VARIANTS[number] {
    return score > 8 ? 'success' : score > 6 ? 'info' : 'danger'
 }

 const ScoreBadge: React.FunctionComponent<{ score: number }> = props => (
-    <div
-        className={`ml-4 badge badge-pill badge-${scoreToClassSuffix(props.score)}`}
-        data-tooltip={`${props.score} out of 10`}
-    >
+    <Badge className="ml-4" pill={true} variant={scoreToClassSuffix(props.score)} tooltip={`${props.score} out of 10`}>
        Score: {props.score}
-    </div>
+    </Badge>
 )

 class SurveyResponseNode extends React.PureComponent<SurveyResponseNodeProps, SurveyResponseNodeState> {
--- a/client/web/src/user/settings/emails/UserEmail.tsx
+++ b/client/web/src/user/settings/emails/UserEmail.tsx
@ -2,6 +2,7 @@ import React, { useState, FunctionComponent } from 'react'

 import { dataOrThrowErrors, gql } from '@sourcegraph/shared/src/graphql/graphql'
 import { asError, ErrorLike } from '@sourcegraph/shared/src/util/errors'
+import { Badge } from '@sourcegraph/wildcard'

 import { requestGraphQL } from '../../../backend/graphql'
 import {
@ -134,11 +135,21 @@ export const UserEmail: FunctionComponent<Props> = ({
            <div className="d-flex align-items-center justify-content-between">
                <div className="d-flex align-items-center">
                    <span className="mr-2">{email}</span>
-                    {verified && <span className="badge badge-success mr-1">Verified</span>}
-                    {!verified && !verificationPending && (
-                        <span className="badge badge-secondary mr-1">Not verified</span>
+                    {verified && (
+                        <Badge variant="success" className="mr-1">
+                            Verified
+                        </Badge>
+                    )}
+                    {!verified && !verificationPending && (
+                        <Badge variant="secondary" className="mr-1">
+                            Not verified
+                        </Badge>
+                    )}
+                    {isPrimary && (
+                        <Badge variant="primary" className="mr-1">
+                            Primary
+                        </Badge>
                    )}
-                    {isPrimary && <span className="badge badge-primary mr-1">Primary</span>}
                    {!verified && verificationPending && (
                        <span>
                            <span className={styles.dot}>&bull;&nbsp;</span>
--- a/client/web/src/user/settings/repositories/RepositoryNode.tsx
+++ b/client/web/src/user/settings/repositories/RepositoryNode.tsx
@ -10,6 +10,7 @@ import React, { useCallback } from 'react'

 import { LoadingSpinner } from '@sourcegraph/react-loading-spinner'
 import { RepoLink } from '@sourcegraph/shared/src/components/RepoLink'
+import { Badge } from '@sourcegraph/wildcard'

 import { ExternalServiceKind } from '../../../graphql-operations'

@ -131,7 +132,11 @@ export const RepositoryNode: React.FunctionComponent<RepositoryNodeProps> = ({
                        <RepoLink className="text-muted" repoName={name} to={null} />
                    </div>
                    <div>
-                        {isPrivate && <div className="badge badge-secondary text-muted">Private</div>}
+                        {isPrivate && (
+                            <Badge variant="secondary" className="text-muted" as="div">
+                                Private
+                            </Badge>
+                        )}
                        <ChevronRightIcon className="icon-inline ml-2 text-primary" />
                    </div>
                </a>
@ -195,7 +200,13 @@ export const CheckboxRepositoryNode: React.FunctionComponent<CheckboxRepositoryN
                        onClick={handleOnClick}
                    />
                </div>
-                <div>{isPrivate && <div className="badge bg-color-2 text-muted">Private</div>}</div>
+                <div>
+                    {isPrivate && (
+                        <Badge className="bg-color-2 text-muted" as="div">
+                            Private
+                        </Badge>
+                    )}
+                </div>
            </RepositoryNodeContainer>
        </tr>
    )
--- a/client/wildcard/src/components/Badge/Badge.module.scss
+++ b/client/wildcard/src/components/Badge/Badge.module.scss
@ -1,4 +1,193 @@
-.badge {
-    display: inline-flex;
-    align-items: center;
+:root {
+    --badge-font-size: 0.75rem;
+    --badge-font-weight: 500;
+    --badge-padding-y: 0.125rem;
+    --badge-padding-x: 0.375rem;
+    --badge-border-radius: 3px;
+    --badge-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
+}
+
+.badge {
+    display: inline-block;
+    padding: var(--badge-padding-y) var(--badge-padding-x);
+    font-size: var(--badge-font-size);
+    font-weight: var(--badge-font-weight);
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: var(--badge-border-radius);
+
+    background-color: var(--subtle-bg);
+    color: var(--link-color);
+    border: none;
+    line-height: 1rem;
+
+    &:focus,
+    &.focus {
+        outline: 0;
+    }
+}
+
+a.badge:hover,
+a.badge:focus {
+    text-decoration: none;
+}
+
+.badge:empty {
+    display: none;
+}
+
+.btn .badge {
+    position: relative;
+    top: -1px;
+}
+
+.pill {
+    // Preserve original Bootstrap padding values
+    // stylelint-disable-next-line declaration-property-unit-whitelist
+    padding-right: 0.6em;
+    // stylelint-disable-next-line declaration-property-unit-whitelist
+    padding-left: 0.6em;
+    border-radius: 10rem;
+}
+
+.sm {
+    --badge-font-size: 0.6875rem;
+    --badge-padding-y: 0;
+    --badge-padding-x: 0.25rem;
+    --badge-border-radius: 2px;
+}
+
+a.badge {
+    transition: var(--badge-transition);
+}
+
+// Base Variants
+.primary,
+.secondary,
+.success,
+.danger,
+.info,
+.warning,
+.merged,
+.outline-secondary {
+    background-color: var(--badge-base);
+    color: var(--badge-text);
+    border: var(--badge-border, none);
+}
+
+a.primary,
+a.secondary,
+a.success,
+a.danger,
+a.info,
+a.warning,
+a.merged,
+a.outline-secondary {
+    background-color: var(--badge-base);
+    color: var(--badge-text);
+
+    &:hover,
+    &:focus,
+    &.focus {
+        color: var(--badge-text);
+        background-color: var(--badge-dark);
+    }
+
+    &:focus,
+    &.focus {
+        outline: 0;
+
+        :global(.theme-light) & {
+            box-shadow: 0 0 0 0.125rem var(--badge-light);
+        }
+
+        :global(.theme-dark) & {
+            box-shadow: 0 0 0 0.125rem var(--badge-dark);
+        }
+    }
+}
+
+.primary {
+    --badge-base: var(--primary);
+    --badge-light: var(--primary-2);
+    --badge-dark: var(--primary-3);
+    --badge-text: var(--light-text);
+}
+
+.secondary {
+    --badge-base: var(--secondary);
+    --badge-light: var(--secondary-2);
+    --badge-dark: var(--secondary-3);
+    --badge-text: var(--body-color);
+}
+
+.success {
+    --badge-base: var(--success);
+    --badge-light: var(--success-2);
+    --badge-dark: var(--success-3);
+    --badge-text: var(--light-text);
+}
+
+.danger {
+    --badge-base: var(--danger);
+    --badge-light: var(--danger-2);
+    --badge-dark: var(--danger-3);
+    --badge-text: var(--light-text);
+}
+
+.info {
+    --badge-base: var(--info);
+    --badge-light: var(--info-2);
+    --badge-dark: var(--info-3);
+    --badge-text: var(--dark-text);
+}
+
+.warning {
+    --badge-base: var(--warning);
+    --badge-light: var(--warning-2);
+    --badge-dark: var(--warning-3);
+    --badge-text: var(--dark-text);
+}
+
+.merged {
+    --badge-base: var(--merged);
+    --badge-light: var(--merged-2);
+    --badge-dark: var(--merged-3);
+    --badge-text: var(--light-text);
+}
+
+.outline-secondary {
+    --badge-base: transparent;
+    --badge-light: var(--secondary-2);
+    --badge-dark: var(--secondary-3);
+    --badge-text: var(--text-muted);
+    --badge-border: 1px solid var(--secondary);
+}
+
+:global(.theme-light),
+:global(.theme-dark) {
+    // Update secondary text color and focus state for better contrast
+    a.secondary,
+    a.outline-secondary {
+        &:focus,
+        &.focus {
+            box-shadow: var(--focus-box-shadow);
+        }
+    }
+    a.secondary {
+        &:hover,
+        &:focus,
+        &.focus {
+            color: var(--body-color);
+        }
+    }
+    a.outline-secondary {
+        &:hover,
+        &:focus,
+        &.focus {
+            background-color: var(--color-bg-1);
+        }
+    }
 }
--- a/client/wildcard/src/components/Badge/Badge.story.tsx
+++ b/client/wildcard/src/components/Badge/Badge.story.tsx
@ -41,7 +41,7 @@ export const Badges = () => (
        ))}
        <h2 className="mt-4">Size</h2>
        <p>We can also make our badges smaller.</p>
-        <Badge size="sm">I am a small badge</Badge>
+        <Badge small={true}>I am a small badge</Badge>
        <h2 className="mt-4">Pills</h2>
        <p>Commonly used to display counts, we can style badges as pills.</p>
        <Badge pill={true} variant="secondary">
@ -49,7 +49,7 @@ export const Badges = () => (
        </Badge>
        <h2 className="mt-4">Links</h2>
        <p>For more advanced functionality, badges can also function as links.</p>
-        <Badge href="https://example.com" variant="link">
+        <Badge href="https://example.com" variant="secondary">
            I am a link
        </Badge>
    </>
--- a/client/wildcard/src/components/Badge/Badge.tsx
+++ b/client/wildcard/src/components/Badge/Badge.tsx
@ -2,7 +2,7 @@ import classNames from 'classnames'
 import React from 'react'

 import styles from './Badge.module.scss'
-import { BADGE_SIZES, BADGE_VARIANTS } from './constants'
+import { BADGE_VARIANTS } from './constants'

 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
    /**
@ -10,9 +10,9 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     */
    variant?: typeof BADGE_VARIANTS[number]
    /**
-     * Allows modifying the size of the badge. Supports larger or smaller variants.
+     * Allows modifying the size of the badge. Supports a smaller variant.
     */
-    size?: typeof BADGE_SIZES[number]
+    small?: boolean
    /**
     * Render the badge as a rounded pill
     */
@ -25,6 +25,10 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     * Used to render the badge as a link to a specific URL
     */
    href?: string
+    /**
+     * If the Badge should use branded styles. Defaults to true.
+     */
+    branded?: boolean
    /**
     * Used to change the element that is rendered.
     */
@ -38,24 +42,21 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 export const Badge: React.FunctionComponent<BadgeProps> = ({
    children,
    variant,
-    size,
+    small,
    pill,
    tooltip,
    className,
+    branded = true,
    href,
    as: Component = 'span',
    ...otherProps
 }) => {
+    const brandedClassName =
+        branded && classNames(styles.badge, variant && styles[variant], small && styles.sm, pill && styles.pill)
+
    const commonProps = {
        'data-tooltip': tooltip,
-        className: classNames(
-            'badge',
-            styles.badge,
-            variant && `badge-${variant}`,
-            size && `badge-${size}`,
-            pill && 'badge-pill',
-            className
-        ),
+        className: classNames(brandedClassName, className),
        ...otherProps,
    }

--- a/client/wildcard/src/components/Badge/ProductStatusBadge.module.scss
+++ b/client/wildcard/src/components/Badge/ProductStatusBadge.module.scss
@ -1,3 +1,5 @@
 .product-status-badge {
+    display: inline-flex;
+    align-items: center;
    text-transform: capitalize;
 }
--- a/client/wildcard/src/components/Badge/constants.ts
+++ b/client/wildcard/src/components/Badge/constants.ts
@ -1,12 +1,2 @@
-export const BADGE_VARIANTS = [
-    'primary',
-    'secondary',
-    'success',
-    'danger',
-    'warning',
-    'info',
-    'merged',
-    'link',
-] as const
-export const BADGE_SIZES = ['sm', 'lg'] as const
+export const BADGE_VARIANTS = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'merged'] as const
 export const PRODUCT_STATUSES = ['beta', 'prototype', 'experimental', 'wip', 'new'] as const