Skip to main content
Nexus Design System
GitHub

Badge

Badge labels an item with a short status, category or count. It is not interactive. Pair a status color with text or an icon, because color alone doesn't carry meaning.

Badge
'use client';

import { Badge } from '@/components/nxds/components/badge/badge';

export default function BadgeDefault() {
  return <Badge>Badge</Badge>;
}

Installation

npx nxds-cli@latest add badge

Run npx nxds-cli@latest init first if nxds isn’t set up in your app yet. See Install.

Usage

import { Badge } from '@/components/nxds/components/badge/badge';

Examples

With right icon

Add a trailing icon with rightIcon.

Dismiss
'use client';

import { XIcon } from '@phosphor-icons/react/ssr';

import { Badge } from '@/components/nxds/components/badge/badge';

export default function BadgeWithRightIcon() {
  return (
    <Badge variant="secondary" isCaps={false} rightIcon={<XIcon />}>
      Dismiss
    </Badge>
  );
}

This example also needs:

npm install @phosphor-icons/react@^2.1.10

Icon only

Show only an icon, named for screen readers with aria-label.

'use client';

import { CheckIcon } from '@phosphor-icons/react/ssr';

import { Badge } from '@/components/nxds/components/badge/badge';

export default function BadgeIconOnly() {
  return (
    <Badge
      variant="success"
      fill="light"
      leftIcon={<CheckIcon />}
      aria-label="Approved"
    />
  );
}

This example also needs:

npm install @phosphor-icons/react@^2.1.10

Status with icons

Pair each status color with text and a suggested icon, so status never relies on color alone.

SuccessWarningErrorInfo
'use client';

import {
  CheckCircleIcon,
  InfoIcon,
  WarningCircleIcon,
  WarningIcon,
} from '@phosphor-icons/react/ssr';

import { Badge } from '@/components/nxds/components/badge/badge';

export default function BadgeStatusWithIcons() {
  return (
    <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
      <Badge
        variant="success"
        fill="light"
        isCaps={false}
        leftIcon={<CheckCircleIcon />}
      >
        Success
      </Badge>
      <Badge
        variant="warning"
        fill="light"
        isCaps={false}
        leftIcon={<WarningIcon />}
      >
        Warning
      </Badge>
      <Badge
        variant="error"
        fill="light"
        isCaps={false}
        leftIcon={<WarningCircleIcon />}
      >
        Error
      </Badge>
      <Badge
        variant="information"
        fill="light"
        isCaps={false}
        leftIcon={<InfoIcon />}
      >
        Info
      </Badge>
    </div>
  );
}

This example also needs:

npm install @phosphor-icons/react@^2.1.10

All variants

Compare every variant and fill in caps and sentence case.

Solid Fill (Caps)

LabelLabelLabelLabelLabelLabel

Solid Fill (Sentence)

LabelLabelLabelLabelLabelLabel

Light Fill (Caps)

LabelLabelLabelLabelLabelLabel

Light Fill (Sentence)

LabelLabelLabelLabelLabelLabel

Outline Fill (Caps)

DefaultSecondaryErrorWarningSuccessInfo

Outline Fill (Sentence)

DefaultSecondaryErrorWarningSuccessInfo

Number Badges

888888

Icon Only

With Icons

LabelLabelLabel

With SVG Loader

LoadingSyncing
'use client';

import { CheckIcon, XIcon } from '@phosphor-icons/react/ssr';

import { Badge } from '@/components/nxds/components/badge/badge';
import { Spinner } from '@/components/nxds/components/spinner/spinner';

export default function BadgeAllVariants() {
  return (
    <div className="nx:flex nx:flex-col nx:gap-8">
      {/* Solid Fill - Caps */}
      <div>
        <h3 className="nx:text-foreground nx:mb-3 nx:typography-label-default">
          Solid Fill (Caps)
        </h3>
        <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
          <Badge variant="default">Label</Badge>
          <Badge variant="secondary">Label</Badge>
          <Badge variant="error">Label</Badge>
          <Badge variant="warning">Label</Badge>
          <Badge variant="success">Label</Badge>
          <Badge variant="information">Label</Badge>
        </div>
      </div>

      {/* Solid Fill - Sentence */}
      <div>
        <h3 className="nx:text-foreground nx:mb-3 nx:typography-label-default">
          Solid Fill (Sentence)
        </h3>
        <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
          <Badge variant="default" isCaps={false}>
            Label
          </Badge>
          <Badge variant="secondary" isCaps={false}>
            Label
          </Badge>
          <Badge variant="error" isCaps={false}>
            Label
          </Badge>
          <Badge variant="warning" isCaps={false}>
            Label
          </Badge>
          <Badge variant="success" isCaps={false}>
            Label
          </Badge>
          <Badge variant="information" isCaps={false}>
            Label
          </Badge>
        </div>
      </div>

      {/* Light Fill - Caps */}
      <div>
        <h3 className="nx:text-foreground nx:mb-3 nx:typography-label-default">
          Light Fill (Caps)
        </h3>
        <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
          <Badge variant="default" fill="light">
            Label
          </Badge>
          <Badge variant="secondary" fill="light">
            Label
          </Badge>
          <Badge variant="error" fill="light">
            Label
          </Badge>
          <Badge variant="warning" fill="light">
            Label
          </Badge>
          <Badge variant="success" fill="light">
            Label
          </Badge>
          <Badge variant="information" fill="light">
            Label
          </Badge>
        </div>
      </div>

      {/* Light Fill - Sentence */}
      <div>
        <h3 className="nx:text-foreground nx:mb-3 nx:typography-label-default">
          Light Fill (Sentence)
        </h3>
        <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
          <Badge variant="default" fill="light" isCaps={false}>
            Label
          </Badge>
          <Badge variant="secondary" fill="light" isCaps={false}>
            Label
          </Badge>
          <Badge variant="error" fill="light" isCaps={false}>
            Label
          </Badge>
          <Badge variant="warning" fill="light" isCaps={false}>
            Label
          </Badge>
          <Badge variant="success" fill="light" isCaps={false}>
            Label
          </Badge>
          <Badge variant="information" fill="light" isCaps={false}>
            Label
          </Badge>
        </div>
      </div>

      {/* Outline Fill - Caps */}
      <div>
        <h3 className="nx:text-foreground nx:mb-3 nx:typography-label-default">
          Outline Fill (Caps)
        </h3>
        <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
          <Badge variant="default" fill="outline">
            Default
          </Badge>
          <Badge variant="secondary" fill="outline">
            Secondary
          </Badge>
          <Badge variant="error" fill="outline">
            Error
          </Badge>
          <Badge variant="warning" fill="outline">
            Warning
          </Badge>
          <Badge variant="success" fill="outline">
            Success
          </Badge>
          <Badge variant="information" fill="outline">
            Info
          </Badge>
        </div>
      </div>

      {/* Outline Fill - Sentence */}
      <div>
        <h3 className="nx:text-foreground nx:mb-3 nx:typography-label-default">
          Outline Fill (Sentence)
        </h3>
        <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
          <Badge variant="default" fill="outline" isCaps={false}>
            Default
          </Badge>
          <Badge variant="secondary" fill="outline" isCaps={false}>
            Secondary
          </Badge>
          <Badge variant="error" fill="outline" isCaps={false}>
            Error
          </Badge>
          <Badge variant="warning" fill="outline" isCaps={false}>
            Warning
          </Badge>
          <Badge variant="success" fill="outline" isCaps={false}>
            Success
          </Badge>
          <Badge variant="information" fill="outline" isCaps={false}>
            Info
          </Badge>
        </div>
      </div>

      {/* Number Badges */}
      <div>
        <h3 className="nx:text-foreground nx:mb-3 nx:typography-label-default">
          Number Badges
        </h3>
        <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
          <Badge variant="default" isNumber>
            8
          </Badge>
          <Badge variant="secondary" isNumber>
            8
          </Badge>
          <Badge variant="error" isNumber>
            8
          </Badge>
          <Badge variant="warning" isNumber>
            8
          </Badge>
          <Badge variant="success" isNumber>
            8
          </Badge>
          <Badge variant="information" isNumber>
            8
          </Badge>
        </div>
      </div>

      {/* Icon Only */}
      <div>
        <h3 className="nx:text-foreground nx:mb-3 nx:typography-label-default">
          Icon Only
        </h3>
        <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
          <Badge
            variant="success"
            fill="light"
            leftIcon={<CheckIcon />}
            aria-label="Approved"
          />
          <Badge
            variant="default"
            fill="solid"
            leftIcon={<CheckIcon />}
            aria-label="Verified"
          />
          <Badge
            variant="error"
            fill="outline"
            rightIcon={<XIcon />}
            aria-label="Error"
          />
        </div>
      </div>

      {/* With Icons */}
      <div>
        <h3 className="nx:text-foreground nx:mb-3 nx:typography-label-default">
          With Icons
        </h3>
        <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
          <Badge variant="default" isCaps={false} leftIcon={<CheckIcon />}>
            Label
          </Badge>
          <Badge variant="success" isCaps={false} leftIcon={<CheckIcon />}>
            Label
          </Badge>
          <Badge variant="error" isCaps={false} rightIcon={<XIcon />}>
            Label
          </Badge>
        </div>
      </div>

      {/* With SVG Loader */}
      <div>
        <h3 className="nx:text-foreground nx:mb-3 nx:typography-label-default">
          With SVG Loader
        </h3>
        <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
          <Badge
            variant="information"
            fill="outline"
            isCaps={false}
            leftIcon={
              <Spinner
                role="presentation"
                aria-hidden="true"
                aria-label={undefined}
              />
            }
          >
            Loading
          </Badge>
          <Badge
            variant="information"
            fill="light"
            isCaps={false}
            leftIcon={
              <Spinner
                role="presentation"
                aria-hidden="true"
                aria-label={undefined}
              />
            }
          >
            Syncing
          </Badge>
        </div>
      </div>
    </div>
  );
}

This example also needs: Spinner.

Props

Badge

Badge props
PropTypeDefaultDescription
fill"outline" | "light" | "solid" | null"solid"No description
isCapsbooleantrue

Uppercase text with wider letter spacing.

isNumberbooleanfalse

Renders a round count badge from its children and ignores icons. Add an aria-label such as "8 unread", because a bare number lacks context.

leftIconReactNodeNo default documented

Icon before the label, sized to 14px. Without children, it shows alone.

rightIconReactNodeNo default documented

Icon after the label, sized to 14px. Without children or leftIcon, it shows alone.

variant"default" | "error" | "secondary" | "success" | "information" | "warning" | null"default"No description

Badge labels an item with a short status, category or count. It is not interactive. Pair a status color with text or an icon, because color alone doesn't carry meaning.

<script setup lang="ts">
import { Badge } from '@/components/badge';
</script>

<template>
  <Badge>Badge</Badge>
</template>

Installation

  1. Install the following dependencies:

    npm install class-variance-authority@^0.7.1

  2. Copy and paste the following code into your project.

    components/badge/Badge.vue
    <script setup lang="ts">
import type { HTMLAttributes, VNode } from 'vue';

import { flattenedNodes } from '../../lib/slots';
import { cn } from '../../lib/utils';

import {
  badgeIconClasses,
  badgeShapeClasses,
  type BadgeVariants,
  badgeVariants,
} from '.';

export interface BadgeProps {
  variant?: BadgeVariants['variant'];
  fill?: BadgeVariants['fill'];
  /** Uppercase text with wider letter spacing. */
  isCaps?: boolean;
  /**
   * Renders a round count badge from its children and ignores icons.
   * Add an `aria-label` such as "8 unread", because a bare number lacks context.
   */
  isNumber?: boolean;
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<BadgeProps>(), {
  variant: 'default',
  fill: 'solid',
  isCaps: true,
  isNumber: false,
});

const slots = defineSlots<{
  default?: () => VNode[];
  /** Icon before the label, sized to 14px. Without a label, it shows alone. */
  'left-icon'?: () => VNode[];
  /** Icon after the label, sized to 14px. */
  'right-icon'?: () => VNode[];
}>();

function isIconOnly(): boolean {
  return (
    !props.isNumber &&
    Boolean(slots['left-icon'] || slots['right-icon']) &&
    flattenedNodes(slots.default?.()).length === 0
  );
}
</script>

<template>
  <span
    data-slot="badge"
    :data-variant="variant"
    :data-fill="fill"
    :data-caps="isCaps"
    :data-number="isNumber || undefined"
    :data-icon-only="isIconOnly() || undefined"
    :role="isIconOnly() ? 'img' : undefined"
    :class="
      cn(
        badgeVariants({ variant, fill }),
        badgeShapeClasses(isNumber, isIconOnly(), isCaps),
        props.class
      )
    "
  >
    <span v-if="isIconOnly()" :class="badgeIconClasses">
      <slot v-if="slots['left-icon']" name="left-icon" />
      <slot v-else name="right-icon" />
    </span>
    <template v-else>
      <span
        v-if="slots['left-icon'] && !isNumber"
        aria-hidden="true"
        :class="badgeIconClasses"
      >
        <slot name="left-icon" />
      </span>
      <slot />
      <span
        v-if="slots['right-icon'] && !isNumber"
        aria-hidden="true"
        :class="badgeIconClasses"
      >
        <slot name="right-icon" />
      </span>
    </template>
  </span>
</template>
    components/badge/index.ts
    import { cva, type VariantProps } from 'class-variance-authority';

export { default as Badge, type BadgeProps } from './Badge.vue';

export const badgeVariants = cva(
  'nx:inline-flex nx:box-border nx:h-6 nx:w-fit nx:items-center nx:justify-center nx:gap-1 nx:rounded-md nx:border-default nx:border-transparent nx:whitespace-nowrap nx:transition-colors',
  {
    variants: {
      variant: {
        default: '',
        secondary: '',
        error: '',
        warning: '',
        success: '',
        information: '',
      },
      fill: {
        solid: '',
        light: '',
        outline: '',
      },
    },
    compoundVariants: [
      // Solid fill variants
      {
        variant: 'default',
        fill: 'solid',
        className: 'nx:bg-primary-background nx:text-primary-foreground',
      },
      {
        variant: 'secondary',
        fill: 'solid',
        className: 'nx:bg-secondary-background nx:text-secondary-foreground',
      },
      {
        variant: 'error',
        fill: 'solid',
        className: 'nx:bg-error-background nx:text-error-foreground',
      },
      {
        variant: 'warning',
        fill: 'solid',
        className: 'nx:bg-warning-background nx:text-warning-foreground',
      },
      {
        variant: 'success',
        fill: 'solid',
        className: 'nx:bg-success-background nx:text-success-foreground',
      },
      {
        variant: 'information',
        fill: 'solid',
        className:
          'nx:bg-information-background nx:text-information-foreground',
      },
      // Light fill variants
      {
        variant: 'default',
        fill: 'light',
        className: 'nx:bg-primary-subtle nx:text-primary-subtle-foreground',
      },
      {
        variant: 'secondary',
        fill: 'light',
        className: 'nx:bg-secondary-subtle nx:text-secondary-subtle-foreground',
      },
      {
        variant: 'error',
        fill: 'light',
        className: 'nx:bg-error-subtle nx:text-error-subtle-foreground',
      },
      {
        variant: 'warning',
        fill: 'light',
        className: 'nx:bg-warning-subtle nx:text-warning-subtle-foreground',
      },
      {
        variant: 'success',
        fill: 'light',
        className: 'nx:bg-success-subtle nx:text-success-subtle-foreground',
      },
      {
        variant: 'information',
        fill: 'light',
        className:
          'nx:bg-information-subtle nx:text-information-subtle-foreground',
      },
      // Outline fill variants
      {
        variant: 'default',
        fill: 'outline',
        className:
          'nx:border-primary-border nx:bg-primary-subtle nx:text-primary-subtle-foreground',
      },
      {
        variant: 'secondary',
        fill: 'outline',
        className:
          'nx:border-border-default nx:bg-secondary-subtle nx:text-secondary-subtle-foreground',
      },
      {
        variant: 'error',
        fill: 'outline',
        className:
          'nx:border-error-border nx:bg-error-subtle nx:text-error-subtle-foreground',
      },
      {
        variant: 'warning',
        fill: 'outline',
        className:
          'nx:border-warning-border nx:bg-warning-subtle nx:text-warning-subtle-foreground',
      },
      {
        variant: 'success',
        fill: 'outline',
        className:
          'nx:border-success-border nx:bg-success-subtle nx:text-success-subtle-foreground',
      },
      {
        variant: 'information',
        fill: 'outline',
        className:
          'nx:border-information-border nx:bg-information-subtle nx:text-information-subtle-foreground',
      },
    ],
    defaultVariants: {
      variant: 'default',
      fill: 'solid',
    },
  }
);

export const badgeIconClasses =
  'nx:flex nx:items-center nx:justify-center nx:size-3.5 nx:[&>svg]:size-3.5';

export function badgeShapeClasses(
  isNumber: boolean,
  isIconOnly: boolean,
  isCaps: boolean
) {
  if (isNumber)
    return 'nx:min-w-6 nx:rounded-full nx:px-1.5 nx:typography-label-caps nx:tabular-nums';
  if (isIconOnly) return 'nx:w-6 nx:p-0';
  if (isCaps) return 'nx:typography-label-caps nx:uppercase nx:px-2';
  return 'nx:typography-label-default nx:px-2.5';
}

export type BadgeVariants = VariantProps<typeof badgeVariants>;
    lib/slots.ts
    import { Comment, Fragment, Text, type VNode } from 'vue';

/** The nodes a slot renders, without comments and whitespace-only text. */
export function renderedNodes(nodes: VNode[] | undefined) {
  return (nodes ?? []).filter(
    (node) =>
      node.type !== Comment &&
      !(node.type === Text && !String(node.children).trim())
  );
}

/** {@link renderedNodes} with each `v-for` or `<template>` fragment unwrapped into its children. */
export function flattenedNodes(nodes: VNode[] | undefined): VNode[] {
  return renderedNodes(nodes).flatMap((node) =>
    node.type === Fragment && Array.isArray(node.children)
      ? flattenedNodes(node.children as VNode[])
      : [node]
  );
}

  3. Keep each file at the path shown above it.

    Paths are relative to packages/vue/src/. Keep the same folders under your @/ root, and the imports between files work without edits.

Usage

import { Badge } from '@/components/badge';

Examples

With right icon

Add a trailing icon with the #right-icon slot.

<script setup lang="ts">
import { PhX } from '@phosphor-icons/vue';

import { Badge } from '@/components/badge';
</script>

<template>
  <Badge variant="secondary" :is-caps="false">
    Dismiss
    <template #right-icon><PhX /></template>
  </Badge>
</template>

This example also needs:

npm install @phosphor-icons/vue@^2.2.1

Icon only

Show only an icon, named for screen readers with aria-label.

<script setup lang="ts">
import { PhCheck } from '@phosphor-icons/vue';

import { Badge } from '@/components/badge';
</script>

<template>
  <Badge variant="success" fill="light" aria-label="Approved">
    <template #left-icon><PhCheck /></template>
  </Badge>
</template>

This example also needs:

npm install @phosphor-icons/vue@^2.2.1

Status with icons

Pair each status color with text and a suggested icon, so status never relies on color alone.

<script setup lang="ts">
import {
  PhCheckCircle,
  PhInfo,
  PhWarning,
  PhWarningCircle,
} from '@phosphor-icons/vue';

import { Badge } from '@/components/badge';
</script>

<template>
  <div class="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
    <Badge variant="success" fill="light" :is-caps="false">
      <template #left-icon><PhCheckCircle /></template>
      Success
    </Badge>
    <Badge variant="warning" fill="light" :is-caps="false">
      <template #left-icon><PhWarning /></template>
      Warning
    </Badge>
    <Badge variant="error" fill="light" :is-caps="false">
      <template #left-icon><PhWarningCircle /></template>
      Error
    </Badge>
    <Badge variant="information" fill="light" :is-caps="false">
      <template #left-icon><PhInfo /></template>
      Info
    </Badge>
  </div>
</template>

This example also needs:

npm install @phosphor-icons/vue@^2.2.1

All variants

Compare every variant and fill in caps and sentence case.

<script setup lang="ts">
import { PhCheck, PhX } from '@phosphor-icons/vue';

import { Badge } from '@/components/badge';
import { Spinner } from '@/components/spinner';
</script>

<template>
  <div class="nx:flex nx:flex-col nx:gap-8">
    <div>
      <h3 class="nx:text-foreground nx:mb-3 nx:typography-label-default">
        Solid Fill (Caps)
      </h3>
      <div class="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
        <Badge variant="default">Label</Badge>
        <Badge variant="secondary">Label</Badge>
        <Badge variant="error">Label</Badge>
        <Badge variant="warning">Label</Badge>
        <Badge variant="success">Label</Badge>
        <Badge variant="information">Label</Badge>
      </div>
    </div>
    <div>
      <h3 class="nx:text-foreground nx:mb-3 nx:typography-label-default">
        Solid Fill (Sentence)
      </h3>
      <div class="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
        <Badge variant="default" :is-caps="false">Label</Badge>
        <Badge variant="secondary" :is-caps="false">Label</Badge>
        <Badge variant="error" :is-caps="false">Label</Badge>
        <Badge variant="warning" :is-caps="false">Label</Badge>
        <Badge variant="success" :is-caps="false">Label</Badge>
        <Badge variant="information" :is-caps="false">Label</Badge>
      </div>
    </div>
    <div>
      <h3 class="nx:text-foreground nx:mb-3 nx:typography-label-default">
        Light Fill (Caps)
      </h3>
      <div class="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
        <Badge variant="default" fill="light">Label</Badge>
        <Badge variant="secondary" fill="light">Label</Badge>
        <Badge variant="error" fill="light">Label</Badge>
        <Badge variant="warning" fill="light">Label</Badge>
        <Badge variant="success" fill="light">Label</Badge>
        <Badge variant="information" fill="light">Label</Badge>
      </div>
    </div>
    <div>
      <h3 class="nx:text-foreground nx:mb-3 nx:typography-label-default">
        Light Fill (Sentence)
      </h3>
      <div class="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
        <Badge variant="default" fill="light" :is-caps="false">Label</Badge>
        <Badge variant="secondary" fill="light" :is-caps="false">Label</Badge>
        <Badge variant="error" fill="light" :is-caps="false">Label</Badge>
        <Badge variant="warning" fill="light" :is-caps="false">Label</Badge>
        <Badge variant="success" fill="light" :is-caps="false">Label</Badge>
        <Badge variant="information" fill="light" :is-caps="false">Label</Badge>
      </div>
    </div>
    <div>
      <h3 class="nx:text-foreground nx:mb-3 nx:typography-label-default">
        Outline Fill (Caps)
      </h3>
      <div class="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
        <Badge variant="default" fill="outline">Default</Badge>
        <Badge variant="secondary" fill="outline">Secondary</Badge>
        <Badge variant="error" fill="outline">Error</Badge>
        <Badge variant="warning" fill="outline">Warning</Badge>
        <Badge variant="success" fill="outline">Success</Badge>
        <Badge variant="information" fill="outline">Info</Badge>
      </div>
    </div>
    <div>
      <h3 class="nx:text-foreground nx:mb-3 nx:typography-label-default">
        Outline Fill (Sentence)
      </h3>
      <div class="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
        <Badge variant="default" fill="outline" :is-caps="false">Default</Badge>
        <Badge variant="secondary" fill="outline" :is-caps="false"
          >Secondary</Badge
        >
        <Badge variant="error" fill="outline" :is-caps="false">Error</Badge>
        <Badge variant="warning" fill="outline" :is-caps="false">Warning</Badge>
        <Badge variant="success" fill="outline" :is-caps="false">Success</Badge>
        <Badge variant="information" fill="outline" :is-caps="false"
          >Info</Badge
        >
      </div>
    </div>
    <div>
      <h3 class="nx:text-foreground nx:mb-3 nx:typography-label-default">
        Number Badges
      </h3>
      <div class="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
        <Badge variant="default" is-number>8</Badge>
        <Badge variant="secondary" is-number>8</Badge>
        <Badge variant="error" is-number>8</Badge>
        <Badge variant="warning" is-number>8</Badge>
        <Badge variant="success" is-number>8</Badge>
        <Badge variant="information" is-number>8</Badge>
      </div>
    </div>
    <div>
      <h3 class="nx:text-foreground nx:mb-3 nx:typography-label-default">
        Icon Only
      </h3>
      <div class="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
        <Badge variant="success" fill="light" aria-label="Approved"
          ><template #left-icon><PhCheck /></template
        ></Badge>
        <Badge variant="default" fill="solid" aria-label="Verified"
          ><template #left-icon><PhCheck /></template
        ></Badge>
        <Badge variant="error" fill="outline" aria-label="Error"
          ><template #right-icon><PhX /></template
        ></Badge>
      </div>
    </div>
    <div>
      <h3 class="nx:text-foreground nx:mb-3 nx:typography-label-default">
        With Icons
      </h3>
      <div class="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
        <Badge variant="default" :is-caps="false"
          ><template #left-icon><PhCheck /></template>Label</Badge
        >
        <Badge variant="success" :is-caps="false"
          ><template #left-icon><PhCheck /></template>Label</Badge
        >
        <Badge variant="error" :is-caps="false"
          ><template #right-icon><PhX /></template>Label</Badge
        >
      </div>
    </div>
    <div>
      <h3 class="nx:text-foreground nx:mb-3 nx:typography-label-default">
        With SVG Loader
      </h3>
      <div class="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
        <Badge variant="information" fill="outline" :is-caps="false">
          <template #left-icon
            ><Spinner
              role="presentation"
              aria-hidden="true"
              :aria-label="undefined"
          /></template>
          Loading
        </Badge>
        <Badge variant="information" fill="light" :is-caps="false">
          <template #left-icon
            ><Spinner
              role="presentation"
              aria-hidden="true"
              :aria-label="undefined"
          /></template>
          Syncing
        </Badge>
      </div>
    </div>
  </div>
</template>

This example also needs: Spinner.

npm install @phosphor-icons/vue@^2.2.1

Props

Badge

Badge props
PropTypeDefaultDescription
fill"outline" | "solid" | "light" | null"solid"No description
isCapsbooleantrue

Uppercase text with wider letter spacing.

isNumberbooleanfalse

Renders a round count badge from its children and ignores icons. Add an aria-label such as "8 unread", because a bare number lacks context.

variant"default" | "success" | "information" | "warning" | "error" | "secondary" | null"default"No description