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

String

"danger"

dot

Boolean

false

multiLine

Boolean

false

offset

Number | String

0

overlap

Boolean

false

placement

String

"top-end"

preset

String

-

text

String | Number

""

textColor

String

-

transparent

Boolean

false

visibleEmpty

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