Nuxt UI v3 is officially released!

Components

Badge

GitHub
Display a short text to represent a status or a category.

Usage

Use the default slot to set the text of the Badge.

Badge

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

You can also use the label prop:

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

Style

Use the color and variant props to change the visual style of the Badge.

  • variant can be solid (default), outline, soft or subtle.

Badge

<template>
  <UBadge color="primary" variant="solid">Badge</UBadge>
</template>

Besides all the colors from the ui.colors object, you can also use the white and black colors with their pre-defined variants.

White

Badge

<template>
  <UBadge color="white" variant="solid">Badge</UBadge>
</template>

Gray

Badge

<template>
  <UBadge color="gray" variant="solid">Badge</UBadge>
</template>

Black

Badge

<template>
  <UBadge color="black" variant="solid">Badge</UBadge>
</template>

Size

Use the size prop to change the size of the Badge.

Badge

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

Rounded

To customize the border radius of the Badge, you can use the ui prop.

Badge

<template>
  <UBadge :ui="{ rounded: 'rounded-full' }">Badge</UBadge>
</template>
You can customize the whole preset by using the ui prop.

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.

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>
  <UBadge
    icon="i-heroicons-rocket-launch"
    size="sm"
    color="primary"
    variant="solid"
    label="Badge"
    :trailing="false"
  />
</template>

Slots

leading

Use the #leading slot to set the content of the leading icon.

Badge
<template>
  <UBadge label="Badge" color="gray">
    <template #leading>
      <UAvatar
        src="https://avatars.githubusercontent.com/u/739984?v=4"
        size="3xs"
      />
    </template>
  </UBadge>
</template>

trailing

Use the #trailing slot to set the content of the trailing icon.

Badge
<template>
  <UBadge label="Badge" color="gray">
    <template #trailing>
      <UIcon name="i-heroicons-rocket-launch" class="w-4 h-4" />
    </template>
  </UBadge>
</template>

Props

ui
{ base?: string; rounded?: string; font?: string; size?: DeepPartial<{ xs: string; sm: string; md: string; lg: string; }, any>; gap?: DeepPartial<{ xs: string; sm: string; md: string; lg: string; }, any>; color?: DeepPartial<{ white: { solid: string; }; gray: { solid: string; }; black: { solid: string; }; }, any>; variant?: DeepPartial<{ solid: string; outline: string; soft: string; subtle: string; }, any>; icon?: DeepPartial<{ base: string; size: { xs: string; sm: string; md: string; lg: string; }; }, any>; default?: DeepPartial<{ size: string; variant: string; color: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
size
BadgeSize
config.default.size
"sm""xs""md""lg"
label
string | number
null
color
BadgeColor
config.default.color
"primary""white""gray""black""red""orange""amber""yellow""lime""green""emerald""teal""cyan""sky""blue""indigo""violet""purple""fuchsia""pink""rose"
variant
BadgeVariant
config.default.variant
"solid""outline""soft""subtle"
icon
string
null
leadingIcon
string
null
trailingIcon
string
null
trailing
boolean
false
leading
boolean
false

Config

{
  base: 'inline-flex items-center',
  rounded: 'rounded-md',
  font: 'font-medium',
  size: {
    xs: 'text-xs px-1.5 py-0.5',
    sm: 'text-xs px-2 py-1',
    md: 'text-sm px-2 py-1',
    lg: 'text-sm px-2.5 py-1.5'
  },
  gap: {
    xs: 'gap-0.5',
    sm: 'gap-1',
    md: 'gap-1',
    lg: 'gap-1.5'
  },
  color: {
    white: {
      solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
    },
    gray: {
      solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
    },
    black: {
      solid: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
    }
  },
  variant: {
    solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
    outline: 'text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400',
    soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
    subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
  },
  icon: {
    base: 'flex-shrink-0',
    size: {
      xs: 'h-4 w-4',
      sm: 'h-4 w-4',
      md: 'h-5 w-5',
      lg: 'h-5 w-5'
    }
  },
  default: {
    size: 'sm',
    variant: 'solid',
    color: 'primary'
  }
}

Avatar

Display an image that represents a resource or a group of resources.

Breadcrumb

A list of links that indicate the current page's location within a navigational hierarchy.