Skip to content

Alert

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

Preview

Open in the playground

Usage

AlertExample.vueVue / TS
<script setup lang="ts">
import { FzAlert } from '@chrisdalbano/forza-ui'
</script>

<template>
  <FzAlert title="Build saved" tone="success"
    >Your changes are ready.</FzAlert
  >
</template>
TypeScript exampleSource you can use.

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

Props

NameTypeRequiredDefault
titlestringYesNone
tone"info" | "success" | "warning" | "danger" | undefinedNo"info"

Events and state

status; danger uses alert

Slots

default

Add from source

sh
forza add alert

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

Released under the MIT License. Independent work.