Button

State belongs to the parent. Compose this component with the props and slots below.

Preview

Open in the playground

Usage

ButtonExample.vueVue / TS

<script setup lang="ts">
import { FzButton } from '@chrisdalbano/forza-ui'
function saveBuild(): void {
  /* your application action */
}
</script>

<template>
  <FzButton @click="saveBuild">Save build</FzButton>
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
variant	"primary" | "secondary" | "ghost" | undefined	No	"primary"
size	"md" | "sm" | undefined	No	"md"
disabled	boolean | undefined	No	None
loading	boolean | undefined	No	None
type	"button" | "submit" | "reset" | undefined	No	"button"

Events and state

native click

Slots

default, trailing

Add from source

forza add button

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.