Components

Badge

Draw attention to important information.

Usage

20
<template>
  <NXW-Badge>
    <NXW-Button>Button</NXW-Button>

    <template #badge-content> 20 </template>
  </NXW-Badge>
</template>

Props

border

boolean
|
string
Default
border-2

bottom

boolean
Default
false

color

object
Default
{
  "bg": "bg-red-500 dark:bg-red-500",
  "border": "border-white dark:border-zinc-900",
  "text": "text-white dark:text-white"
}

height

string
Default
min-h-[24px]

left

boolean
Default
false
boolean
Default
true

text

string
Default
text-xs font-bold

top

boolean
Default
true

width

string
Default
min-w-[24px]

Slots

default

The default slot is used to place the content on which the badge will be applied.

badge-content

20
<template>
  <NXW-Badge>
    <NXW-Button>Button</NXW-Button>

    <template #badge-content> 20 </template>
  </NXW-Badge>
</template>

Sets the content of the badge.