Badge

It is an element used to provide information about new updates and notifications, and providing additional information. It is combined with components such as avatar, icons and buttons.

Typy

The type determines which the badge is displayed, and thus where and what it should be used for.

• dot - Used to show an update of an existing menu or service, a dot is displayed near the icon or text button;
• status - Used to show the user status, it used with Avatar;
• icon - Used to show the type of user with an icon, it used with Avatar;
• text - Used to show the type of user with a letter, used with Avatar;
• number -Used to show the number of notifications, used with Avatar, near the icon or text button;

Props

type

Badge type is responsible for the variant in which it is displayed

type:String

default:dot

values:dot, status, icon, text, number

color

Color from Tailwind palette

type:String

default:current

values:current, primary, secondary, warning, info, success, danger

size

Rozmiar badge'a

type:String

default:md

values:xs, sm, md, lg, xl

value

Value if the badge type is number

type:Number

default:0

text

Value if the Badge type is text

type:String

default:''

Slots

default

Default slot for number, letter or icon

Examples

Dot type sizes

xs

sm

md

lg

xl

xs

<badge size="xs" color="primary" />

sm

<badge size="sm" color="primary" />

md

<badge size="md" color="primary" />

lg

<badge size="lg" color="primary" />

xl

<badge size="xl" color="primary" />

Status type sizes

xs

sm

md

lg

xl

xs

<badge type="status" size="xs" color="primary" />

sm

<badge type="status" size="sm" color="primary" />

md

<badge type="status" size="md" color="primary" />

lg

<badge type="status" size="lg" color="primary" />

xl

<badge type="status" size="xl" color="primary" />

Colors (for all types)

current

primary

secondary

warning

danger

success

info

current

<badge type="status" />

primary

<badge type="status" color="primary" />

secondary

<badge type="status" color="secondary" />

warning

<badge type="status" color="warning" />

danger

<badge type="status" color="danger" />

success

<badge type="status" color="success" />

info

<badge type="status" color="info" />

Sizes for text type

xs

b

sm

a

md

d

lg

g

xl

e

xs

<badge size="xs" color="primary" type="text" text="b" />

sm

<badge size="sm" color="primary" type="text" text="a" />

md

<badge size="md" color="primary" type="text" text="d" />

lg

<badge size="lg" color="primary" type="text" text="g" />

xl

<badge size="xl" color="primary" type="text" text="e" />

Sizes for number type

xs

9

sm

9

md

9

lg

9

xl

9

xs

<badge size="xs" color="primary" type="number" :value="9" />

sm

<badge size="sm" color="primary" type="number" :value="9" />

md

<badge size="md" color="primary" type="number" :value="9" />

lg

<badge size="lg" color="primary" type="number" :value="9" />

xl

<badge size="xl" color="primary" type="number" :value="9" />

Sizes for the number type (large number)

xs

99+

sm

99+

md

99+

lg

99+

xl

99+

xs

<badge size="xs" color="primary" type="number" :value="9999" />

sm

<badge size="sm" color="primary" type="number" :value="9999" />

md

<badge size="md" color="primary" type="number" :value="9999" />

lg

<badge size="lg" color="primary" type="number" :value="9999" />

xl

<badge size="xl" color="primary" type="number" :value="9999" />

Sizes for icon type

xs

sm

md

lg

xl

xs

<badge size="xs" color="primary" type="icon">
  <icon size="full" :icon="times" />
</badge>

sm

<badge size="sm" color="primary" type="icon">
  <icon size="full" :icon="times" />
</badge>

md

<badge size="md" color="primary" type="icon">
  <icon size="full" :icon="times" />
</badge>

lg

<badge size="lg" color="primary" type="icon">
  <icon size="full" :icon="times" />
</badge>

xl

<badge size="xl" color="primary" type="icon">
  <icon size="full" :icon="times" />
</badge>

WARNING

The icon inserted into the badge must have a defined value for size="full" because it will then be correctly scaled to the component.