Badge
A small label, generally appearing inside or in proximity to another larger interface component, representing a status, property, or some other metadata.
import { registerBanner } from '@vonage/vivid';
registerBadge('your-prefix');
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.
| 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 |
IconId |
|
A decorative icon the custom element should have. See the [Vivid Icon
Gallery](/icons/icons-gallery/) for available icons and `icon-name`s
See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ |
| iconTrailing |
boolean |
|
Indicates the icon affix alignment. |
| shape |
'rounded' | 'pill' |
|
Sets the badge border-radius |
| size |
'normal' | 'expanded' |
|
Sets the badge size |
| text |
string |
|
Sets 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
|
IconId |
|
A decorative icon the custom element should have. See the [Vivid Icon
Gallery](/icons/icons-gallery/) for available icons and `icon-name`s
See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ |
|
icon-trailing
|
boolean |
|
Indicates the icon affix alignment. |
|
shape
|
'rounded' | 'pill' |
|
Sets the badge border-radius |
|
size
|
'normal' | 'expanded' |
|
Sets the badge size |
|
text
|
string |
|
Sets 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. |
| Event |
Type |
Description |
| blur |
FocusEvent |
Fires when the element loses focus. |
| click |
MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus |
FocusEvent |
Fires when the element receives focus. |
| input |
Event |
Fires when the value of an element has been changed. |
| keydown |
KeyboardEvent |
Fires when a key is pressed. |
| keyup |
KeyboardEvent |
Fires when a key is released. |
| Name |
Type |
Description |
| blur |
FocusEvent |
Fires when the element loses focus. |
| click |
MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus |
FocusEvent |
Fires when the element receives focus. |
| input |
Event |
Fires when the value of an element has been changed. |
| keydown |
KeyboardEvent |
Fires when a key is pressed. |
| keyup |
KeyboardEvent |
Fires when a key is released. |
