Badge A small label, generally appearing inside or in proximity to another larger interface component, representing a status, property, or some other metadata.
import { VBadge } from '@vonage/vivid-api-vue' ;
< VBadge text= "My Badge" />
import { registerBanner } from '@vonage/vivid-api' ;
registerBadge ( 'your-prefix' );
import { registerBadge } from '@vonage/vivid-api' ;
registerBadge ( 'your-prefix' );
< your-prefix-badge text= "My Badge" ></ your-prefix-badge >
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 .
import { VBadge , VIcon } from '@vonage/vivid-api-vue' ;
< VBadge text= "Accessibility testing" appearance= "subtle-light" connotation= "success" size= "expanded" >
< template # icon > < VIcon label= "Done:" name= "check-circle-solid" connotation= "success" /> </ template >
< 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 >
Property Type Default Description appearance 'filled' | 'duotone' | 'subtle' | 'subtle-light'Sets the badge appearance connotation 'alert' | 'accent' | 'cta' | 'success' | 'warning' | 'information' | 'announcement'Sets the badge connotation iconTrailing booleanIndicates the icon affix alignment. shape 'rounded' | 'pill'Sets the badge border-radius size 'normal' | 'expanded'Sets the badge size text stringSets a text on the badge
Property Type Default Description appearance 'filled' | 'duotone' | 'subtle' | 'subtle-light'Sets the badge appearance connotation 'alert' | 'accent' | 'cta' | 'success' | 'warning' | 'information' | 'announcement'Sets the badge connotation icon-trailing booleanIndicates the icon affix alignment. shape 'rounded' | 'pill'Sets the badge border-radius size 'normal' | 'expanded'Sets the badge size text stringSets a text on the badge
Name Description icon The preferred way to add an icon to the component.
Name Description icon The preferred way to add an icon to the component.
