Badge - Nuxt UI

Usage

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

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

You can also use the label prop:

label

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Style

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

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

color

variant

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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

White

variant

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Gray

variant

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Black

variant

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Size

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

size

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Rounded

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

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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.

size

color

variant

trailing

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

`leading`

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

label

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

`trailing`

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

label

Badge

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

{ 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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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.