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
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