Badge
A small label, generally appearing inside or in proximity to another larger interface component, representing a status, property, or some other metadata.
<script setup lang="ts">import { VBadge } from '@vonage/vivid-api-vue';</script><template> <VBadge class="badge-trim" text="overflowing text" /></template><style>.badge-trim { inline-size: 60px;}</style><vwc-badge class="badge-trim" text="overflowing text"></vwc-badge>
<style> .badge-trim { inline-size: 60px; }</style><script setup lang="ts">import { VBadge } from '@vonage/vivid-api-vue';</script><template> <VBadge class="badge-inline-size" text="with min-width" /></template><style>.badge-inline-size { min-width: 300px;}</style><vwc-badge class="badge-inline-size" text="with min-width"></vwc-badge>
<style> .badge-inline-size { min-width: 300px; }</style>If you need to use the badge together with buttons (e.g. in toolbars), use an expanded size of the badge with a super-condensed button. This will make both components the same height and vertical alignment, improving layout consistency.
<script setup lang="ts">import { VActionGroup, VBadge, VButton } from '@vonage/vivid-api-vue';</script><template> <VActionGroup> <VBadge appearance="subtle" size="expanded" text="Example badge" /> <VButton size="super-condensed" label="Example button" appearance="filled" /> </VActionGroup></template><vwc-action-group> <vwc-badge appearance="subtle" size="expanded" text="Example badge"></vwc-badge> <vwc-button size="super-condensed" label="Example button" appearance="filled"></vwc-button></vwc-action-group>