Badge

A small label, generally appearing inside or in proximity to another larger interface component, representing a status, property, or some other metadata.

Usage

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>

Slots

Icon Slot

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.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-badge
	text="Accessibility testing"
	appearance="subtle-light"
	connotation="success"
	size="expanded"
>
	<vwc-icon
		label="Done:"
		slot="icon"
		name="check-circle-solid"
		connotation="success"
	></vwc-icon>
</vwc-badge>

API Reference

Properties

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

Slots

Name	Description
Icon	Add an icon to the component.