Alert

Tells people something about the page or a task that needs their attention: a result, a warning or a problem.

<script setup lang="ts">
import { FsAlert } from '@fivespark/ui'
</script>

<template>
  <FsAlert status="info" title="Nieuwe prijslijst" description="De prijslijst van Belisol geldt vanaf 1 november." class="w-full max-w-lg" />
</template>

Usage

<script setup lang="ts">
import { FsAlert } from '@fivespark/ui'
</script>

<template>
  <FsAlert status="success" title="Offerte verstuurd" description="De klant heeft een e-mail ontvangen." />
</template>

The title states the point, not the status; the status is added for screen readers. A short-lived message that disappears on its own is a Toast.

Examples

Statuses

status is required and chooses the colour and the icon.

<script setup lang="ts">
import { FsAlert } from '@fivespark/ui'
</script>

<template>
  <div class="grid w-full max-w-lg gap-3">
    <FsAlert status="info" title="Nieuwe prijslijst" description="De prijslijst van Belisol geldt vanaf 1 november." />
    <FsAlert status="success" title="Offerte verstuurd" description="De klant heeft een e-mail met de offerte ontvangen." />
    <FsAlert status="warning" title="Prijslijst verloopt binnenkort" description="De prijslijst verloopt op 1 november." />
    <FsAlert status="danger" title="Offerte niet verstuurd" description="De mailserver reageerde niet. Je wijzigingen zijn bewaard." />
  </div>
</template>

With actions

Put one or two buttons or a link in the actions slot: what the person can do about it.

<script setup lang="ts">
import { FsAlert, FsButton } from '@fivespark/ui'
</script>

<template>
  <FsAlert status="danger" title="Offerte niet verstuurd" description="De mailserver reageerde niet. Je wijzigingen zijn bewaard." class="w-full max-w-lg">
    <template #actions><FsButton label="Opnieuw versturen" /></template>
  </FsAlert>
</template>

Dismissible

dismissible adds a close button. The alert does not remove itself: remove it on dismiss and move focus to something sensible. A danger alert is never dismissible.

<script setup lang="ts">
import { FsAlert, FsButton } from '@fivespark/ui'
import { ref, useTemplateRef } from 'vue'

const visible = ref(true)
const nextStep = useTemplateRef('nextStep')

function dismiss() {
  visible.value = false
  nextStep.value?.$el.focus()
}
</script>

<template>
  <div class="flex w-full max-w-lg flex-col items-start gap-3">
    <FsAlert v-if="visible" status="success" title="Offerte verstuurd" description="De klant heeft een e-mail met de offerte ontvangen." dismissible @dismiss="dismiss" />
    <FsButton ref="nextStep" label="Nieuwe offerte maken" />
  </div>
</template>

Announced

Add announce to an alert that appears because of what the person just did, and mount it with v-if at that moment. Do not use it for an alert that is on the page when it loads.

<script setup lang="ts">
import { FsAlert, FsButton } from '@fivespark/ui'
import { ref } from 'vue'

const saved = ref(false)
</script>

<template>
  <div class="flex w-full max-w-lg flex-col items-start gap-3">
    <FsButton label="Offerte opslaan" @click="saved = true" />
    <FsAlert v-if="saved" announce status="success" title="Offerte opgeslagen" description="Je wijzigingen staan in het concept." />
  </div>
</template>

Dense

<script setup lang="ts">
import { FsAlert } from '@fivespark/ui'
</script>

<template>
  <FsAlert size="dense" status="warning" title="Prijslijst verloopt binnenkort" class="w-full max-w-lg" />
</template>

API Reference

FsAlert

Prop	Type	Default	Description
status	"danger" | "warning" | "success" | "info"	required	`danger` when something failed, `warning` when it will unless acted on, `success` when the result is not already visible, `info` otherwise.
title	string		States the point, not the status: "Offerte niet verstuurd".
level	2 | 3 | 4 | 5 | 6		Makes the title a heading of this level, when the alert leads a part of the page. Leave it out in a form or beside a control.
description	string		One or two sentences: what happened, and what to do. The default slot replaces it.
size	"default" | "dense"	"default"	`dense` beside dense controls. Give the buttons in `actions` the same size.
announce	boolean	false	Announces the message when the alert is mounted. For an alert that appears because of what the user just did, mounted with `v-if` at that moment; not for one on the page when it loads.
dismissible	boolean	false	Adds a dismiss button. Remove the alert and move focus in the `dismiss` handler. Not for `danger`.
statusText	string		Replaces the hidden word said before the message: "Fout:", "Waarschuwing:", "Gelukt:" or "Informatie:".
dismissText	string		Replaces the dismiss button's name, "Melding sluiten" or "Dismiss message".

Event	Payload	Description
dismiss	[]	The dismiss button was pressed. The alert stays until the page removes it.

Slot	Props	Description
default	any	The message, in place of `description`: for text with a link or markup in it.
actions	any	Buttons below the message, for what the user can do about it.