Skip to content

Basic Button


vue
<fv-button borderRadius="3"></fv-button>

Button With Icon


vue
<fv-button icon="CalculatorAddition" theme="dark">Add</fv-button>

Custom Button


vue
<fv-button icon="CalculatorAddition" :isBoxShadow="true">Add</fv-button>
vue
<fv-button icon="CalculatorAddition" theme="dark" background="linear-gradient(to right, #000046, #1cb5e0)" borderRadius="3" :isBoxShadow="true">Add</fv-button>

Custom Reveal Border

vue
<fv-button icon="CalculatorAddition" theme="dark" background="#000046" revealBorderColor="#1cb5e0" revealBackgroundColor="rgba(28, 181, 226, 0.3)" borderRadius="3" borderWidth="3" :isBoxShadow="true">Add</fv-button>

Disabled Button


vue
<fv-button disabled icon="CalculatorAddition">Add</fv-button>

Properties


PropertyTypeRequiredDefaultDescription
iconstringNo''Icon with Fabric-Icon
foregroundstringNo''Button foreground color.
backgroundstringNo''Button background color.
borderRadiusnumberNo3Button border radius.
borderColorstringNo''Button border color.
fontSizenumberNo13.3Button font size.
fontWeightstringNo'normal'Button font weight.
revealBorderColorbooleanNofalseReveal border color for the button.
revealBackgroundColorbooleanNofalseReveal background color for the button.
isBoxShadowbooleanNofalseEnable the button shadow.
disabledbooleanNofalseDisabled button
borderWidthnumberNo1Button border width.
themestringNo'global'Theme style. Supports global, light, dark, system, and custom.
revealBorderGradientListarrayNo[]See the Button revealBorderGradientList option.
revealBackgroundGradientListarrayNo[]See the Button revealBackgroundGradientList option.
langstringNo"global"See the Button lang option.

Events


EventArgumentsDescription
clickeventButton onclick

Slots


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

MIT Licensed