Badge

<pa-badge> | PaBadge

Badges are small status indicators that can be used to label, categorize, or draw attention to specific content.

<pa-badge>Default</pa-badge>

Examples

Variants

Use the variant prop to change the badge's color theme.

PrimarySecondarySuccessDangerWarningInfoLightDark

<template>
  <div>
    <pa-badge variant="primary">Primary</pa-badge>
    <pa-badge variant="secondary">Secondary</pa-badge>
    <pa-badge variant="success">Success</pa-badge>
    <pa-badge variant="danger">Danger</pa-badge>
    <pa-badge variant="warning">Warning</pa-badge>
    <pa-badge variant="info">Info</pa-badge>
    <pa-badge variant="light">Light</pa-badge>
    <pa-badge variant="dark">Dark</pa-badge>
  </div>
</template>

Pill Badges

Use the pill prop to create rounded pill-shaped badges.

PrimarySecondarySuccessDangerWarningInfo

<template>
  <div>
    <pa-badge variant="primary" pill>Primary</pa-badge>
    <pa-badge variant="secondary" pill>Secondary</pa-badge>
    <pa-badge variant="success" pill>Success</pa-badge>
    <pa-badge variant="danger" pill>Danger</pa-badge>
    <pa-badge variant="warning" pill>Warning</pa-badge>
    <pa-badge variant="info" pill>Info</pa-badge>
  </div>
</template>

Sizes

Use the size prop to create different sized badges.

SmallDefaultMediumLarge

<template>
  <div>
    <pa-badge variant="primary" size="sm">Small</pa-badge>
    <pa-badge variant="primary">Default</pa-badge>
    <pa-badge variant="primary" size="md">Medium</pa-badge>
    <pa-badge variant="primary" size="lg">Large</pa-badge>
  </div>
</template>

Usage with Other Components

Badges work great alongside other components for status indicators.

Example heading New

Status: Active

<template>
  <div>
    <!-- Badge in button -->
    <pa-button variant="primary">
      Messages <pa-badge variant="light">4</pa-badge>
    </pa-button>
    
    <!-- Badge in heading -->
    <h4>Example heading <pa-badge variant="secondary">New</pa-badge></h4>
    
    <!-- Badge as status indicator -->
    <p>Status: <pa-badge variant="success" pill>Active</pa-badge></p>
  </div>
</template>

Importing

If you're using the component registration system, the badge component is automatically available. Otherwise, you can import it directly:

import { PaBadge } from '@payadvantage/ui-components'

For Vue projects:

<script setup>
import { PaBadge } from '@payadvantage/ui-components'
</script>

Slots

Name	Description
(default)	The badge's content and text.

Learn more about using slots.

Properties

Name	Description	Reflects	Type	Default
variant	The badge's theme variant.	no	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'	'secondary'
pill	Makes the badge pill-shaped with rounded corners.	no	boolean	false
size	The badge's size.	no	'sm' | 'md' | 'lg' | 'default'	'default'

Learn more about component properties.

Dependencies

This component uses Bootstrap's badge styling system and requires Bootstrap CSS or theme styles to be imported.