Badge ⚠️ Experimental ​

The Badge component can be used imported from:

Playground ​

Parameters ​

Slots ​

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspanContent of the badge.

Parameters use ​

Check the documentation about how to use the parameters.

content ​

The content to be assigned to the badge. It uses the default slot too.

Use te attribute if it's only for text. If you need to use HTML, use the slot.

Badged content

config ​

The config attribute is used to define the badge type, style and size.

type ​

For the z-badge component, the type parameter establishes the type of content that the badge is going to be showing. The possibles variants are: dot, icon, text.

  • The z-badge component will use the dot configuration as default, matching the dot variant of the specifications. This is the default value.

    Badged content

  • The textvariant will use config="text" and will receive the text to be shown in another attribute called text. If not text is provided, the badge will look like the dot base variant. Check the text parameter use.

  • The iconvariant will use config="icon" and will receive the icon to be shown in another attribute called icon. Check the icon parameter use.

style ​

The first modifier is style, that can receive the value outline to make the badge separate from the content by a line that matches the background. This uses the --z-bg variable, so it's important that this is changed within the context.

Badged contentBadged content
size ​

The second modifier is size, which can have the values xs, s, m (default), or l. Must be always at the end and the z-badge attribute. The type can be skipped if the value is dot.

Badged contentBadged contentBadged contentBadged contentBadged content

text ​

An attribute that defines the icon to be shown in the badge when the config is text.

Badged content

icon ​

An attribute that defines the icon to be shown in the badge when the config is icon.

Badged content

fill ​

The attribute fill changes the color of the badge background. The value names available are defined using the color palettes (check the colors section), and the possible values are: bold, blue-dark, blue-sky, moss, peach, lemon, or dove. The color of the text adapts for contrast.

Badged contentBadged contentBadged contentBadged contentBadged contentBadged contentBadged content

Special uses ​

Badge for Profile ​

When Badge is used with Profile, the position is adjusted:

Notifications ​

We can use the Icon to make a notifications alert:

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​