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/Badge.vue

Usage

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

::component-code

slots: default: Badge

Badge ::

You can achieve the same result by using the label prop.

::component-code

props: label: Badge

::

Style

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

::component-code

slots: default: Badge props: color: primary variant: solid

Badge ::

::tip Try out the gray color for a neutral style. ::

Size

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

::component-code

slots: default: Badge props: size: md

Badge ::

API

Props

:component-props

Slots

:component-slots

Theme

:component-theme