🟢 Badge

Basic

NBadge is a component that can be used to display a small badge with a number or text.

You can use label prop or default slot to set the label text.

Badge 4

Variants

badge="{variant}" - change the variant of the badge.

Variant	Description
`soft`	The default variant.
`solid`	The solid variant.
`outline`	The outline variant.
`~`	The unstyle or base variant

Soft BadgeSolid BadgeOutline BadgeBase Badge

Colors

badge="{variant}-{color}" - change the color of the badge.

You can use any color provided by the Tailwind CSS color palette, the default is primary. You can also add your own colors to the palette through the Configuration section.

Dynamic colors:

soft-primary (default)solid-pinkoutline-infosoft-successoutline-yellowsolid-erroroutline-indigo

Static colors:

soft-graysolid-blackoutline-white

Sizes

size="{size}" - change the size of the badge.

🚀 You can freely adjust the size of the badge using any size imaginable. No limits exist, and you can use breakpoints such as sm:sm, xs:lg to change size based on screen size or states such as hover:lg, focus:3xl to change size based on input state and more.

The padding and font-size of the badge scale depends on the size. If you want to change the font-size and padding simultaneously, you can always customize it using utility classes.

BadgeBadgeBadge

Icon

icon={icon} - add an icon to the badge.

By default we use heroicons and tabler for the icons, you can use any icon provided by Iconify through icones, refer to configuration for more information.

v1.2.0OfflineOnline

Closable

closable - add a close button to the badge.

BadgeBadgeBadgeBadgeBadgeBadge

Events

Event Name	Description
`@close`	emit an event when the close icon is clicked. Use in conjunction with `closable`.

Slots

Default

Evan You

Anthony Fu

Daniel Roe

Sébastien Chopin

Pooya Parsa

Eduardo San Martin Morote

Guillaume Chau

Props

export interface NBadgeProps {
  /**
   * Allows you to add `UnaUI` badge preset properties,
   * Think of it as a shortcut for adding options or variants to the preset if available.
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/badge.ts
   * @example
   * badge="solid-yellow"
   */
  badge?: string
  /**
   * Add a label to the badge.
   */
  label?: string
  /**
   * Display an icon on the left side of the badge,
   * this also allows you to add utility classes to customize icon.
   *
   * @example
   * icon="i-heroicons-information-circle text-green-500 dark:text-green-400 text-2xl"
   */
  icon?: string

  /**
   * Display `close` icon on the right side of the badge,
   *
   * @default false
   */
  closable?: boolean

  /**
   * `UnaUI` preset configuration
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/badge.ts
   */
  una?: {
    // base
    badgeDefaultVariant?: string
    badge?: string
    badgeIconBase?: string
    badgeClose?: string
    badgeCloseIconBase?: string

    // icons
    badgeCloseIcon?: string
  }
}

Presets

type BadgePrefix = 'badge'

export const staticBadge: Record<`${BadgePrefix}-${string}` | BadgePrefix, string> = {
  // config
  'badge-default-variant': 'badge-soft',
  'badge-close-icon': 'i-close',

  // base
  'badge': 'text-xs leading-tight py-0.3333333333333333em px-0.6666666666666666em gap-x-0.25em inline-flex items-center rounded-md font-medium text-brand',
  'badge-icon-base': 'text-1em',
  'badge-close': 'relative rounded-sm h-1.16em w-1.16em grid place-items-center -mr-0.375em hover:bg-brand/20',
  'badge-close-icon-base': 'text-brand/75 group-hover:text-brand/90',

  // variants
  'badge-soft-gray': 'bg-muted text-muted n-gray-900 dark:n-gray-50 ring-1 ring-gray-700/10 dark:ring-gray-400/30',
  'badge-solid-black': 'bg-inverted text-inverted n-gray-300 dark:n-gray-600',
  'badge-outline-white': 'bg-base text-base ring-1 ring-base n-gray-600 dark:n-gray-300',
}

export const dynamicBadge: [RegExp, (params: RegExpExecArray) => string][] = [
  // variants
  [/^badge-solid(-(\S+))?$/, ([, , c = 'primary']) => `bg-${c}-100 dark:bg-${c}-800 n-${c}-700 dark:n-${c}-200`],
  [/^badge-soft(-(\S+))?$/, ([, , c = 'primary']) => `bg-${c}-50 n-${c}-700 dark:n-${c}-400 ring-1 ring-${c}-700/10 dark:bg-${c}-400/10 dark:ring-${c}-400/30`],
  [/^badge-outline(-(\S+))?$/, ([, , c = 'primary']) => `bg-transparent n-${c}-700 dark:n-${c}-400 ring-1 ring-${c}-700/10 dark:ring-${c}-400/30`],
]

export const badge = [
  ...dynamicBadge,
  staticBadge,
]

Component

<script setup lang="ts">
import type { NBadgeProps } from '../../types'

import { computed } from 'vue'
import NIcon from './Icon.vue'

const props = withDefaults(defineProps<NBadgeProps>(), {
  una: () => ({
    badgeDefaultVariant: 'badge-default-variant',
  }),
})

const emit = defineEmits(['close'])

const badgeVariants = ['solid', 'soft', 'outline'] as const
const hasVariant = computed(() => badgeVariants.some(badgeVariants => props.badge?.includes(badgeVariants)))
const isBaseVariant = computed(() => props.badge?.includes('~'))
</script>

<template>
  <span
    :badge="badge"
    class="badge"
    :class="[
      !hasVariant && !isBaseVariant ? una?.badgeDefaultVariant : '',
      una?.badge,
    ]"
  >
    <NIcon
      v-if="icon"
      badge="icon-base"
      :class="una?.badgeIconBase"
      :name="icon"
    />

    <slot>
      {{ label }}
    </slot>

    <button
      v-if="closable"
      badge="close"
      :class="una?.badgeClose"
      group
      @click="emit('close')"
    >
      <NIcon
        :name="una?.badgeCloseIcon ?? 'badge-close-icon'"
        :class="una?.badgeCloseIconBase"
        badge="close-icon-base"
      />
      <span class="absolute -inset-0.25em" />
    </button>
  </span>
</template>

Edit this page on GitHub

Components🟢 Avatar Group

Components🟢 Breadcrumb