Badge

GitHub
表示状态或类别的简短文本。

用法

使用默认插槽设置Badge的标签。

Badge
<template>
  <UBadge>Badge</UBadge>
</template>

Label

使用label道具设置徽章的标签。

Badge
<template>
  <UBadge label="Badge" />
</template>

颜色

使用color道具来改变徽章的颜色。

Badge
<template>
  <UBadge color="neutral">Badge</UBadge>
</template>

Variant

使用variant道具来改变徽章的变体。

Badge
<template>
  <UBadge color="neutral" variant="outline">Badge</UBadge>
</template>

Size

使用size道具更改徽章的大小。

Badge
<template>
  <UBadge size="xl">Badge</UBadge>
</template>

Icon

使用icon道具在徽章内显示Icon。

Badge
<template>
  <UBadge icon="i-lucide-rocket" size="md" color="primary" variant="solid">Badge</UBadge>
</template>

使用leading和trailing道具设置图标位置，或使用leading-icon和trailing-icon道具为每个位置设置不同的图标。

Badge
<template>
  <UBadge trailing-icon="i-lucide-arrow-right" size="md">Badge</UBadge>
</template>

头像

使用avatar道具在徽章内显示Avatar。

Badge
<template>
  <UBadge
    :avatar="{
      src: 'https://github.com/nuxt.png',
      loading: 'lazy'
    }"
    size="md"
    color="neutral"
    variant="outline"
  >
    Badge
  </UBadge>
</template>

示例

class道具

使用class道具覆盖徽章的基本样式。

Badge
<template>
  <UBadge class="font-bold rounded-full">Badge</UBadge>
</template>

API

Props

Prop Default Type
as
'span'
any

The element or component this component should render as.

label
string | number
color
'primary'
"error" | "primary" | "secondary" | "success" | "info" | "warning" | "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
any

Display an icon based on the leading and trailing props.

avatar
AvatarProps

Display an avatar on the left side.

leading
boolean

When true, the icon will be displayed on the left side.

leadingIcon
any

Display an icon on the left side.

trailing
boolean

When true, the icon will be displayed on the right side.

trailingIcon
any

Display 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-medium inline-flex items-center',
        label: 'truncate',
        leadingIcon: 'shrink-0',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailingIcon: 'shrink-0'
      },
      variants: {
        fieldGroup: {
          horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]',
          vertical: 'not-only:first:rounded-b-none not-only:last: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 px-1 py-0.5 gap-1 rounded-sm',
            leadingIcon: 'size-3',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-3'
          },
          sm: {
            base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm',
            leadingIcon: 'size-3',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-3'
          },
          md: {
            base: 'text-xs px-2 py-1 gap-1 rounded-md',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-4'
          },
          lg: {
            base: 'text-sm px-2 py-1 gap-1.5 rounded-md',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-5'
          },
          xl: {
            base: 'text-base px-2.5 py-1 gap-1.5 rounded-md',
            leadingIcon: 'size-6',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-6'
          }
        },
        square: {
          true: ''
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: 'solid',
          class: 'bg-primary text-inverted'
        },
        {
          color: 'primary',
          variant: 'outline',
          class: 'text-primary ring ring-inset ring-primary/50'
        },
        {
          color: 'primary',
          variant: 'soft',
          class: 'bg-primary/10 text-primary'
        },
        {
          color: 'primary',
          variant: 'subtle',
          class: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
        },
        {
          color: 'neutral',
          variant: 'solid',
          class: 'text-inverted bg-inverted'
        },
        {
          color: 'neutral',
          variant: 'outline',
          class: 'ring ring-inset ring-accented text-default bg-default'
        },
        {
          color: 'neutral',
          variant: 'soft',
          class: 'text-default bg-elevated'
        },
        {
          color: 'neutral',
          variant: 'subtle',
          class: 'ring ring-inset ring-accented text-default bg-elevated'
        },
        {
          size: 'xs',
          square: true,
          class: 'p-0.5'
        },
        {
          size: 'sm',
          square: true,
          class: 'p-1'
        },
        {
          size: 'md',
          square: true,
          class: 'p-1'
        },
        {
          size: 'lg',
          square: true,
          class: 'p-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 '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        badge: {
          slots: {
            base: 'font-medium inline-flex items-center',
            label: 'truncate',
            leadingIcon: 'shrink-0',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            trailingIcon: 'shrink-0'
          },
          variants: {
            fieldGroup: {
              horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]',
              vertical: 'not-only:first:rounded-b-none not-only:last: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 px-1 py-0.5 gap-1 rounded-sm',
                leadingIcon: 'size-3',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-3'
              },
              sm: {
                base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm',
                leadingIcon: 'size-3',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-3'
              },
              md: {
                base: 'text-xs px-2 py-1 gap-1 rounded-md',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-4'
              },
              lg: {
                base: 'text-sm px-2 py-1 gap-1.5 rounded-md',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-5'
              },
              xl: {
                base: 'text-base px-2.5 py-1 gap-1.5 rounded-md',
                leadingIcon: 'size-6',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-6'
              }
            },
            square: {
              true: ''
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: 'solid',
              class: 'bg-primary text-inverted'
            },
            {
              color: 'primary',
              variant: 'outline',
              class: 'text-primary ring ring-inset ring-primary/50'
            },
            {
              color: 'primary',
              variant: 'soft',
              class: 'bg-primary/10 text-primary'
            },
            {
              color: 'primary',
              variant: 'subtle',
              class: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
            },
            {
              color: 'neutral',
              variant: 'solid',
              class: 'text-inverted bg-inverted'
            },
            {
              color: 'neutral',
              variant: 'outline',
              class: 'ring ring-inset ring-accented text-default bg-default'
            },
            {
              color: 'neutral',
              variant: 'soft',
              class: 'text-default bg-elevated'
            },
            {
              color: 'neutral',
              variant: 'subtle',
              class: 'ring ring-inset ring-accented text-default bg-elevated'
            },
            {
              size: 'xs',
              square: true,
              class: 'p-0.5'
            },
            {
              size: 'sm',
              square: true,
              class: 'p-1'
            },
            {
              size: 'md',
              square: true,
              class: 'p-1'
            },
            {
              size: 'lg',
              square: true,
              class: 'p-1'
            },
            {
              size: 'xl',
              square: true,
              class: 'p-1'
            }
          ],
          defaultVariants: {
            color: 'primary',
            variant: 'solid',
            size: 'md'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Changelog

No recent changes

AvatarGroup

Stack multiple avatars in a group.

Banner

Display a banner at the top of your website to inform users about important information.