Badge #
VaBadge is used to showcase information related to other element, such as missed notifications near the user's avatar.
Examples #
Default #
Useful for information views and tables.
Placement #
The placement prop allows you to set placement of the badge relatively to the base element. Available values are: 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).
Color #
The color prop is used to change the color of the component.
Dot #
The dot property minimizes badge to accentuate the base element.
Overlap #
The overlap property allows badge to overlap the base element.
Usage with other components #
By combining a badge with other components, you can add information or focus attention.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| color | Color of the component (theme string or |
|
|
| dot | Shows dot instead of full badge. Useful to notify user without grabbing too much attention. |
|
|
| multiLine | Badge text will wrap to next line. |
|
|
| offset | Moves badge relatively to main axis. |
|
|
| overlap | Allows badge to overlap with element. |
|
|
| placement | Badge will be placed on |
|
|
| preset | Named preset combination of component props. |
| - |
| text | Badge text. |
|
|
| textColor | Text color (theme string or HEX string). |
| - |
| transparent | (Deprecated) Makes badge semi-transparent. |
|
|
| visibleEmpty | Badge will be shown even when there is no text. |
|
|
Css Variables #
| Name | Default Value |
|---|---|
| --va-badge-py | 0 |
| --va-badge-font-size | 0.563rem |
| --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-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 |