Skip to content

Badge-DEMO ​


vue
<fv-Badge :modelValue="3">
    <fv-button>Badge</fv-button>
</fv-Badge>

Badge Different Type ​


Success

vue
<fv-Badge :modelValue="12" type="success">
    <fv-button>Badge</fv-button>
</fv-Badge>

Warning

vue
<fv-Badge :modelValue="2" type="warning">
    <fv-button>Badge</fv-button>
</fv-Badge>

Primary

vue
<fv-Badge :modelValue="9" type="primary">
    <fv-button>Badge</fv-button>
</fv-Badge>

Badge Customize Content ​


vue
<fv-Badge value="You">
    <fv-button>Badge</fv-button>
</fv-Badge>

Badge Max Value ​


vue
<fv-Badge modelValue="100" max="99">
    <fv-button>Badge</fv-button>
</fv-Badge>

Badge Dot ​


vue
<fv-Badge :isDot="true">
    <fv-button>Badge</fv-button>
</fv-Badge>

Properties ​


PropertyTypeRequiredDefaultDescription
modelValuestringNo''
maxanyNoInfinity
isDotbooleanNofalse
hiddenbooleanNofalse
offsetTopstringNo''
offsetRightstringNo''
typestringNo'default'See the Badge type option.
themestringNo'global'See the Badge theme option.
disabledbooleanNofalseSee the Badge disabled option.
langstringNo"global"See the Badge lang option.

Slots ​


  1. Default
javascript
<fv-badge>
    <div></div>
</fv-badge>

MIT Licensed