Badge

A small status indicator component for labels and tags.

?

Name	Category	Description	Type	Default
type	? Style	Type	'primary' | 'success' | 'info' | 'warning' | 'danger'	'primary'
outline	? Style	Outline border style	boolean	false
dash	? Style	Dash border style	boolean	false
round	? Style	Round pixel style	boolean	false
size	? Size	Size	'large' | 'default' | 'small'	'default'
color	? Color	Custom hex color	string	—
icon	? Content	Icon name	string	—
default	? Slot	Badge content		—

Basic Usage

Basic badge display.

<template>
  <div class="demo-badge">
    <px-badge>Badge</px-badge>
    <px-badge type="primary">Primary</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Types

Use type property to define different types.

<template>
  <div class="demo-badge">
    <px-badge type="primary">Primary</px-badge>
    <px-badge type="success">Success</px-badge>
    <px-badge type="info">Info</px-badge>
    <px-badge type="warning">Warning</px-badge>
    <px-badge type="danger">Danger</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Sizes

Use size property to set the badge size.

<template>
  <div class="demo-badge">
    <px-badge type="primary" size="large">Large</px-badge>
    <px-badge type="primary">Default</px-badge>
    <px-badge type="primary" size="small">Small</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Icon

Use icon property to add a pixel icon inside the badge. Combines with text content.

<template>
  <div class="demo-badge">
    <px-badge type="primary" icon="heart">Like</px-badge>
    <px-badge type="success" icon="check">Done</px-badge>
    <px-badge type="warning" icon="notification">Alert</px-badge>
    <px-badge type="info" icon="bookmark">Saved</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Empty Badge

Omit slot content to render an empty dot indicator. Scales automatically with size.

<template>
  <div class="demo-badge-group">
    <div class="demo-badge">
      <px-badge type="primary" />
      <px-badge type="success" />
      <px-badge type="info" />
      <px-badge type="warning" />
      <px-badge type="danger" />
    </div>
    <div class="demo-badge">
      <px-badge type="primary" size="large" />
      <px-badge type="primary" />
      <px-badge type="primary" size="small" />
    </div>
  </div>
</template>

<style scoped>
.demo-badge-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Round

Use round property to apply pixel-style rounded corners.

<template>
  <div class="demo-badge">
    <px-badge type="primary" round>Primary</px-badge>
    <px-badge type="success" round>Success</px-badge>
    <px-badge type="info" round>Info</px-badge>
    <px-badge type="warning" round>Warning</px-badge>
    <px-badge type="danger" round>Danger</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Outline

Use outline property to display a solid border with transparent background.

<template>
  <div class="demo-badge">
    <px-badge type="primary" outline>Primary</px-badge>
    <px-badge type="success" outline>Success</px-badge>
    <px-badge type="info" outline>Info</px-badge>
    <px-badge type="warning" outline>Warning</px-badge>
    <px-badge type="danger" outline>Danger</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Dash

Use dash property to display a dashed border with a light background.

<template>
  <div class="demo-badge">
    <px-badge type="primary" dash>Primary</px-badge>
    <px-badge type="success" dash>Success</px-badge>
    <px-badge type="info" dash>Info</px-badge>
    <px-badge type="warning" dash>Warning</px-badge>
    <px-badge type="danger" dash>Danger</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Custom Color

Use color property to set a custom hex color. Works with default, outline, and dash variants.

<template>
  <div class="demo-badge">
    <px-badge color="#8b5cf6">Purple</px-badge>
    <px-badge color="#f97316">Orange</px-badge>
    <px-badge color="#8b5cf6" outline>Outline</px-badge>
    <px-badge color="#f97316" dash>Dash</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

Badge in Text

Badges can be placed inline within headings and paragraphs.

<template>
  <div class="demo-badge-text">
    <h2>
      Inbox
      <px-badge type="danger">99+</px-badge>
    </h2>
    <p>
      This feature is
      <px-badge type="success" size="small">NEW</px-badge>
      and ready to use.
    </p>
    <h3>
      Messages
      <px-badge type="primary" />
    </h3>
  </div>
</template>

<style scoped>
.demo-badge-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Badge in Button

Badges can be nested inside buttons as count indicators or dot markers.

<template>
  <div class="demo-badge">
    <px-button type="primary">
      Inbox
      <px-badge type="danger" size="small">8</px-badge>
    </px-button>
    <px-button type="info">
      Notifications
      <px-badge type="danger" size="small" />
    </px-button>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>