ZvButton
ZvButton is a standalone component to replace HTML button
INFO
Before you have to import the global css files in your project, follow instructions in Getting Started
Basic usage
vue
<template>
<ZvButton> Test </ZvButton>
</template>
<script lang="ts" setup>
import ZvButton from '@zadigetvoltaire/ui/components/ZvButton'
</script>Loading
html
<ZvButton loading> Test </ZvButton>Size
html
<div style="display: flex; align-items: center; gap: 1rem; background-color: gray; padding: 1rem;">
<ZvButton size="small"> small </ZvButton>
<ZvButton size="medium"> medium </ZvButton>
<ZvButton size="large"> large </ZvButton>
</div>Color
html
<div style="display: flex; align-items: center; gap: 1rem; background-color: gray; padding: 1rem;">
<ZvButton color="black"> black </ZvButton>
<ZvButton color="white"> white </ZvButton>
<ZvButton color="gray"> gray </ZvButton>
</div>Primary
html
<div style="display: flex; align-items: center; gap: 1rem; background-color: gray; padding: 1rem;">
<ZvButton color="black" :primary="false"> black </ZvButton>
<ZvButton color="white" :primary="false"> white </ZvButton>
<ZvButton color="gray" :primary="false"> gray </ZvButton>
</div>Flat
html
<ZvButton flat> Button </ZvButton>Round
html
<ZvButton round> round </ZvButton>Disabled
html
<ZvButton disabled> disabled </ZvButton>Button - Link - RouterLink
TIP
The component determines which component to use according to the attributes with which it is initialized:
- If
toattribute is provided, the component will be a<RouterLink /> - If
hrefattribute is provided, the component will be a<a /> - Otherwise, the component is a button
Is link
Is RouterLink
html
<div style="display: flex; align-items: center; gap: 1rem; background-color: gray; padding: 1rem;">
<ZvButton> Is Button </ZvButton>
<ZvButton href="/"> Is link </ZvButton>
<ZvButton :to="{ path: '/' }"> Is RouterLink </ZvButton>
</div>Types
ts
type ButtonColor = 'black' | 'gray' | 'white'
type ButtonSize = 'small' | 'medium' | 'large'
type ButtonType = 'button' | 'submit' | 'reset'