We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Badge

Badges are compact UI elements that highlight key information, statuses, or counts. They provide visual cues for notifications, categorization, or emphasis, ensuring important details stand out at a glance.

Basic badge

html

Optional properties

Use the properties below to style the badge and copy the code to your project. Try clicking on them.

Property	Type	Description
`variant`	`empty` \| `outlined` \| `default` \|	Controls badge's variant. `empty` has no content inside, `outlined` has transparent background color, `default` has default background color.
`type`	`success` \| `warning` \| `error` \| `info` \| `default`	Defines the badge's type. `success` is a green badge, `warning` is a yellow badge, `error` is a red badge, `info` is a blue badge, and `default` is the standard badge.
`zapClass`	string	Allows overriding default styles by passing Tailwind CSS classes. Utilize the `@zaplib/zapui/tailwind` plugin to target specific elements within the badge component.

Global configurations

A list of global styles, including shape, size, color, font sizes, font weights, and letter spacing can be provided via themeLibrary in the provideZapOption provider. If you have multi theme setup, you can also provide theme specific colors. These apply to all default variants through out the app unless component level styles are provided.

Example

app.config.ts

Colors

You can provide each of these colors for different themes that you use

Property	Description
`bgColor`	Background color of the badge.
`textColor`	Text color of the badge.
`borderColor`	Border color of the badge.

Other styles

You can provide a bunch of other styles, that are not theme based but rather generic

Property	Description
`borderRadius`	Defines the radius of the badge's corners.
`paddingLeft`	Left padding of the badge.
`paddingRight`	Right padding of the badge.
`paddingTop`	Top padding of the badge.
`paddingBottom`	Bottom padding of the badge.
`padding`	Padding around the badge's content.
`width`	Width of the badge.
`height`	Height of the badge.
`fontSize`	Font size of the badge's text.
`fontWeight`	Font weight of the badge's text.
`lineHeight`	Line height of the badge's text.
`letterSpacing`	Letter spacing of the badge's text.
`textTransform`	Transforms the badge's text (e.g., uppercase, lowercase).