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

description, links

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

Usage

Label

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

::component-code

slots: default: Badge

::

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

::component-code

props: label: Badge

::

Color

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

::component-code

props: color: neutral slots: default: Badge

::

Variant

Use the variant props to change the variant of the Badge.

::component-code

props: color: neutral variant: outline slots: default: Badge

::

Size

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

::component-code

props: size: lg slots: default: Badge

::

Examples

class prop

Use the class prop to override the base styles of the Badge.

::component-code

props: class: 'font-bold rounded-full' slots: default: Badge

::

API

Props

:component-props

Slots

:component-slots

Theme

:component-theme