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');
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<script type="module">
import { registerBadge } from 'vivid-bundle';
registerBadge('your-prefix');
</script>
<your-prefix-badge text="My Badge"></your-prefix-badge>
<script setup lang="ts">
import { VBadge } from '@vonage/vivid-vue';
</script>
<template>
<VBadge connotation="success" text="My Badge" />
</template>
Use the icon slot to customise icons.
If set, the icon (deprecated) attribute is ignored.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-badge text="with icon slot" appearance="filled"> <vwc-icon slot="icon" name="check-circle-solid" connotation="success" ></vwc-icon> </vwc-badge>
| 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. |