Badge
A short text to represent a status or a category.
Usage
Use the default slot to set the label of the Badge.
Badge
<template>
<PBadge>Badge</PBadge>
</template>Label
Use the label prop to set the label of the Badge.
Badge
<template>
<PBadge label="Badge" />
</template>Color
Use the color prop to change the color of the Badge.
Badge
<template>
<PBadge color="neutral">Badge</PBadge>
</template>Variant
Use the variant props to change the variant of the Badge.
Badge
<template>
<PBadge color="neutral" variant="outline">Badge</PBadge>
</template>Size
Use the size prop to change the size of the Badge.
Badge
<template>
<PBadge size="xl">Badge</PBadge>
</template>Icon
Use the icon prop to show an Icon inside the Badge.
Badge
<template>
<PBadge icon="i-lucide-rocket" size="md" color="primary" variant="solid">Badge</PBadge>
</template>Use the leading and trailing props to set the icon position or the leading-icon and trailing-icon props to set a different icon for each position.
Badge
<template>
<PBadge trailing-icon="i-lucide-arrow-right" size="md">Badge</PBadge>
</template>Avatar
Use the avatar prop to show an Avatar inside the Badge.
Badge<template>
<PBadge
:avatar="{
src: 'https://github.com/nuxt.png',
loading: 'lazy'
}"
size="md"
color="neutral"
variant="outline"
>
Badge
</PBadge>
</template>Examples
class prop
Use the class prop to override the base styles of the Badge.
Badge
<template>
<PBadge class="font-bold rounded-full">Badge</PBadge>
</template>API
Props
| Prop | Default | Type |
|---|---|---|
as | 'span' | anyThe element or component this component should render as. |
label | string | number | |
color | 'primary' | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" |
variant | 'solid' | "solid" | "outline" | "soft" | "subtle" |
size | 'md' | "xs" | "sm" | "md" | "lg" | "xl" |
square | boolean Render the badge with equal padding on all sides. | |
icon | anyDisplay an icon based on the | |
avatar | AvatarPropsDisplay an avatar on the left side. | |
leading | boolean When | |
leadingIcon | anyDisplay an icon on the left side. | |
trailing | boolean When | |
trailingIcon | anyDisplay an icon on the right side. | |
ui | { base?: SlotClass; label?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailingIcon?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
leading | { ui: object; } |
default | { ui: object; } |
trailing | { ui: object; } |
Theme
app.config.ts
export default defineAppConfig({
ui: {
badge: {
slots: {
base: 'font-500 inline-flex items-center',
label: 'truncate',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailingIcon: 'shrink-0'
},
variants: {
fieldGroup: {
horizontal: 'first:not-[*:only-child]:rounded-e-none last:not-[*:only-child]:rounded-s-none not-last:not-first:rounded-none focus-visible:z-1',
vertical: 'first:not-[*:only-child]:rounded-b-none last:not-[*:only-child]:rounded-t-none not-last:not-first:rounded-none focus-visible:z-1'
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: ''
},
size: {
xs: {
base: 'text-[8px]/3 rounded-sm gap-1',
leadingIcon: 'size-3',
leadingAvatarSize: '3xs',
trailingIcon: 'size-3'
},
sm: {
base: 'text-[10px]/3 rounded-sm gap-1',
leadingIcon: 'size-3',
leadingAvatarSize: '3xs',
trailingIcon: 'size-3'
},
md: {
base: 'text-xs rounded-md gap-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
lg: {
base: 'text-sm rounded-md gap-1.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'text-base rounded-md gap-1.5',
leadingIcon: 'size-6',
leadingAvatarSize: '2xs',
trailingIcon: 'size-6'
}
},
square: {
true: ''
}
},
compoundVariants: [
{
color: 'primary',
variant: 'solid',
class: 'bg-primary color-primary-foreground'
},
{
color: 'primary',
variant: 'outline',
class: 'color-primary ring ring-inset ring-primary/50'
},
{
color: 'primary',
variant: 'soft',
class: 'bg-primary/10 color-primary'
},
{
color: 'primary',
variant: 'subtle',
class: 'bg-primary/10 color-primary ring ring-inset ring-primary/25'
},
{
color: 'neutral',
variant: 'solid',
class: 'color-text-inverted bg-background-inverted'
},
{
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-border-accented color-text bg-background'
},
{
color: 'neutral',
variant: 'soft',
class: 'color-text bg-background-elevated'
},
{
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-border-accented color-text bg-background-elevated'
},
{
size: 'xs',
square: false,
class: 'px-1 py-0.5'
},
{
size: 'xs',
square: true,
class: 'p-0.5'
},
{
size: 'sm',
square: false,
class: 'px-1.5 py-1'
},
{
size: 'sm',
square: true,
class: 'p-1'
},
{
size: 'md',
square: false,
class: 'px-2 py-1'
},
{
size: 'md',
square: true,
class: 'p-1'
},
{
size: 'lg',
square: false,
class: 'px-2 py-1'
},
{
size: 'lg',
square: true,
class: 'p-1'
},
{
size: 'xl',
square: false,
class: 'px-2.5 py-1'
},
{
size: 'xl',
square: true,
class: 'p-1'
}
],
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'md'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
badge: {
slots: {
base: 'font-500 inline-flex items-center',
label: 'truncate',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailingIcon: 'shrink-0'
},
variants: {
fieldGroup: {
horizontal: 'first:not-[*:only-child]:rounded-e-none last:not-[*:only-child]:rounded-s-none not-last:not-first:rounded-none focus-visible:z-1',
vertical: 'first:not-[*:only-child]:rounded-b-none last:not-[*:only-child]:rounded-t-none not-last:not-first:rounded-none focus-visible:z-1'
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: ''
},
size: {
xs: {
base: 'text-[8px]/3 rounded-sm gap-1',
leadingIcon: 'size-3',
leadingAvatarSize: '3xs',
trailingIcon: 'size-3'
},
sm: {
base: 'text-[10px]/3 rounded-sm gap-1',
leadingIcon: 'size-3',
leadingAvatarSize: '3xs',
trailingIcon: 'size-3'
},
md: {
base: 'text-xs rounded-md gap-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
lg: {
base: 'text-sm rounded-md gap-1.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'text-base rounded-md gap-1.5',
leadingIcon: 'size-6',
leadingAvatarSize: '2xs',
trailingIcon: 'size-6'
}
},
square: {
true: ''
}
},
compoundVariants: [
{
color: 'primary',
variant: 'solid',
class: 'bg-primary color-primary-foreground'
},
{
color: 'primary',
variant: 'outline',
class: 'color-primary ring ring-inset ring-primary/50'
},
{
color: 'primary',
variant: 'soft',
class: 'bg-primary/10 color-primary'
},
{
color: 'primary',
variant: 'subtle',
class: 'bg-primary/10 color-primary ring ring-inset ring-primary/25'
},
{
color: 'neutral',
variant: 'solid',
class: 'color-text-inverted bg-background-inverted'
},
{
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-border-accented color-text bg-background'
},
{
color: 'neutral',
variant: 'soft',
class: 'color-text bg-background-elevated'
},
{
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-border-accented color-text bg-background-elevated'
},
{
size: 'xs',
square: false,
class: 'px-1 py-0.5'
},
{
size: 'xs',
square: true,
class: 'p-0.5'
},
{
size: 'sm',
square: false,
class: 'px-1.5 py-1'
},
{
size: 'sm',
square: true,
class: 'p-1'
},
{
size: 'md',
square: false,
class: 'px-2 py-1'
},
{
size: 'md',
square: true,
class: 'p-1'
},
{
size: 'lg',
square: false,
class: 'px-2 py-1'
},
{
size: 'lg',
square: true,
class: 'p-1'
},
{
size: 'xl',
square: false,
class: 'px-2.5 py-1'
},
{
size: 'xl',
square: true,
class: 'p-1'
}
],
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'md'
}
}
}
})
]
})Changelog
No recent changes