Badge
#

VaBadge is used to highlight information related to other element, such as missed notifications near the user's avatar.

Examples
#

Default
#

Useful for information views and tables.

Open in GitHub

Position
#

The placement allows you to set placement of the badge relatively to the base element. Available values: top/bottom/left/right - start/center/end. The offset prop allows you to amend the selected position - it moves badge forward or backward relatively to the main axis (top/bottom/left/right).

Open in GitHub

Color
#

The color property sets the color of the component (respectively, text-color sets the color of the content), both preset and HEX colors are available.

Open in GitHub

Dot
#

The dot property puts the component in a minimalist mode in order to accentuate the base element.

Open in GitHub

Overlap
#

The overlap property allows badge to overlap the base element.

Open in GitHub

Transparent
#

The transparent property adds transparency to the component.

Open in GitHub

Usage with other components
#

By combining a component with others, you can add information to them or focus attention on them.

Open in GitHub

Without content
#

By default, the component is hidden unless content is passed to it via a slot or the text property. The visible-empty property allows displaying an empty component as a colored square.

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
color

Color of the component (theme string or HEX string).

String

"danger"

dot

Shows dot instead of full badge. Useful to notify user without grabbing too much attention.

Boolean

false

multi-line

Badge text will wrap to next line.

Boolean

false

offset

Moves badge relatively to main axis.

Number | String

0

overlap

Allows badge to overlap with element.

Boolean

false

placement

Badge will be placed on placement side of the base element.

String

"top-end"

preset

Named preset combination of component props.

String

-

text

Badge text.

String | Number

""

text-color

Text color (theme string or HEX string).

String

-

transparent

Makes badge semi-transparent.

Boolean

false

visible-empty

Badge will be shown even when there is no text.

Boolean

false

Css Variables #

NameDefault Value
--va-badge-py 0
--va-badge-font-size 0.625rem
--va-badge-border 0.125rem
--va-badge-size calc(var(--va-badge-font-size) * var(--va-badge-line-height) + var(--va-badge-border) * 2)
--va-badge-overlap calc(var(--va-badge-size) / 3)
--va-badge-line-height 1.4
--va-badge-margin 0
--va-badge-width fit-content
--va-badge-dot-size 0.5rem
--va-badge-text-wrapper-transition 0.2s cubic-bezier(0.4, 0, 0.6, 1)
--va-badge-text-wrapper-display inline-flex
--va-badge-text-wrapper-border solid 0.125rem
--va-badge-text-wrapper-border-radius 0.125rem
--va-badge-text-wrapper-font-weight 700
--va-badge-text-wrapper-line-height 1.4
--va-badge-text-wrapper-letter-spacing 0.0375rem
--va-badge-text-wrapper-justify-content center
--va-badge-text-wrapper-white-space nowrap
--va-badge-text-wrapper-width min-content
--va-badge-text-wrapper-height auto
--va-badge-text-wrapper-min-width initial
--va-badge-text-wrapper-min-height initial
--va-badge-text-wrapper-margin 0
--va-badge-text-transform uppercase
--va-badge-text-py 0
--va-badge-text-px 0.25rem