ui/docs/content/2.components/badge.md

description, links

description	links
Display a short text to represent a status or a category.	label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Badge.vue

Usage

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

::component-card

code: Badge

Badge ::

You can also use the label prop:

::component-card

props: label: Badge

::

Style

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

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

::component-card

props: color: 'primary' variant: 'solid' code: Badge

Badge ::

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

White

::component-card

props: color: 'white' variant: 'solid' options:

• name: variant restriction: expected values:
  • solid excludedProps:
• color code: Badge

---

Badge ::

Gray

::component-card

props: color: 'gray' variant: 'solid' options:

• name: variant restriction: expected values:
  • solid excludedProps:
• color code: Badge

---

Badge ::

Black

::component-card

props: color: 'black' variant: 'solid' options:

• name: variant restriction: only values:
  • solid excludedProps:
• color code: Badge

---

Badge ::

Size

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

::component-card

props: size: 'sm' code: Badge

Badge ::

Rounded

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

::component-card

props: ui: rounded: 'rounded-full' excludedProps:

• ui code: Badge

---

Badge ::

::callout{icon="i-heroicons-light-bulb"} 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.

::component-card

props: icon: 'i-heroicons-rocket-launch' size: 'sm' color: 'primary' variant: 'solid' label: Badge trailing: false options:

• name: variant restriction: only values:
  • solid excludedProps:
• icon
• label

---

::

Slots

leading

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

::component-card

slots: leading: baseProps: color: 'gray' props: label: Badge color: 'gray' excludedProps:

• color

---

#leading :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs"} ::

trailing

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

::component-card

slots: trailing: props: label: Badge color: 'gray' excludedProps:

• color

---

#trailing :u-icon{name="i-heroicons-rocket-launch" class="w-4 h-4"} ::

Props

:component-props

Config

:component-preset