Badge
A small label, generally appearing inside or in proximity to another larger interface component, representing a status, property, or some other metadata.
import '@vonage/vivid/badge';
or, if you need to use a unique prefix:
import { registerBanner } from '@vonage/vivid';
registerBadge('your-prefix');
<script setup lang="ts">
import { VBadge } from '@vonage/vivid-vue';
</script>
<template>
<VBadge connotation="success" text="My Badge" />
</template>
Use the icon slot to provide an icon.
If set, the icon attribute (deprecated) will be ignored.
For informative icons, provide an accessible label using the label attribute on the Icon component.
| Name | Description | Description |
|---|---|---|
| text | string |
Sets a text on the badge |
| connotation | Enum_:accent (default), announcement,alert, cta, success, warning, information |
Sets the badge connotation |
| (deprecated as of 05/25) icon |
Enum_:[icon-name] |
Sets the element's icon |
| icon-trailing | string |
Sets icon as trailing |
| appearance | Enum_:filled (default), duotone, subtle, subtle-light |
Sets the badge appearance |
| shape | Enum_:rounded (default), pill |
Sets the badge border-radius |
| size | Enum_:normal (default), expanded |
Sets the badge size |
| Name | Description |
|---|---|
| Icon | Add an icon to the component. |