Badge

サイトマップ
ステータスまたはカテゴリを表す短いテキスト。

使用法

デフォルトスロットを使用してバッジのラベルを設定します。

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

Label

labelプロパティを使用してバッジのラベルを設定します。

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

Color

colorプロパティを使用してバッジの色を変更します。

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

Variant

variant propsを使用してバッジのバリアントを変更します。

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

サイズ

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; }

スロット

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.