Badge

Badges are used to inform user of the status of specific data.

Examples

Variant

Badge can have fill, outline and light variant.

Code

<script setup lang="ts">
import { BaseBadge } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseBadge" variant="filled">Filled</component>
    <component :is="BaseBadge" variant="outlined">Outlined</component>
    <component :is="BaseBadge" variant="light">Light</component>
  </div>
</template>

With Dot

Badges can have a dot attached to it.

Code

<script setup lang="ts">
import { BaseBadge } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseBadge" withDot variant="filled">Filled</component>
    <component :is="BaseBadge" withDot variant="outlined">Outlined</component>
    <component :is="BaseBadge" withDot variant="light">Light</component>
    <component :is="BaseBadge" withDot color="secondary" variant="filled">Filled</component>
    <component :is="BaseBadge" withDot color="secondary" variant="outlined">Outlined</component>
    <component :is="BaseBadge" withDot color="secondary" variant="light">Light</component>
  </div>
  <div>
    <component :is="BaseBadge" withDot color="info" variant="filled">Filled</component>
    <component :is="BaseBadge" withDot color="info" variant="outlined">Outlined</component>
    <component :is="BaseBadge" withDot color="info" variant="light">Light</component>
    <component :is="BaseBadge" withDot color="success" variant="filled">Filled</component>
    <component :is="BaseBadge" withDot color="success" variant="outlined">Outlined</component>
    <component :is="BaseBadge" withDot color="success" variant="light">Light</component>
  </div>
  <div>
    <component :is="BaseBadge" withDot color="warning" variant="filled">Filled</component>
    <component :is="BaseBadge" withDot color="warning" variant="outlined">Outlined</component>
    <component :is="BaseBadge" withDot color="warning" variant="light">Light</component>
    <component :is="BaseBadge" withDot color="danger" variant="filled">Filled</component>
    <component :is="BaseBadge" withDot color="danger" variant="outlined">Outlined</component>
    <component :is="BaseBadge" withDot color="danger" variant="light">Light</component>
  </div>
</template>

With Icon

Badges can have an icon.

Code

<script setup lang="ts">
import { BaseBadge } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseBadge" variant="filled">
    Available Books <base-icon icon="i-fad-books" />
  </component>
  <component :is="BaseBadge" variant="filled" color="success">
    <base-icon icon="i-far-check" /> Success
  </component>
</template>

Badge API

Types

export type BaseBadgeColorType = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'
export type BaseBadgeVariantType = 'fill' | 'light' | 'outline'

Props

Name	Type	Default	Description
variant	BaseBadgeVariantType	fill	Badge variant.
color	BaseBadgeColorType	primary	Badge color.

Slot

#default slot for rendering button content