@wikicasa-dev/components · Feedback · preferred

BaseAlert

Inline, static message box (success/info, error, dark) shown in the page flow, e.g. under a form.

import BaseAlert from "@wikicasa-dev/components/UIKit/BaseAlert";

Use it for a persistent message that belongs to a spot on the page: the result of a form submission, a validation summary, an informative notice. It has no close button, timer or animation: show and hide it with v-if. For a temporary, floating notification use BaseSnackbar.

The look is chosen with alertClass:

  • uikit-alert-w-primary: lavender background, blue text. Success and neutral info ("Messaggio inviato all'agenzia").
  • uikit-alert-w-danger: pale red background, red text. Errors.
  • uikit-alert-w-dark-primary: dark blue background, white text. Strong emphasis on light pages.

Usage

<script setup lang="ts">
import BaseAlert from "@wikicasa-dev/components/UIKit/BaseAlert";
import { ref } from "vue";

const status = ref<"idle" | "success" | "error">("success");
</script>

<template>
  <BaseAlert v-if="status === 'success'" alert-class="uikit-alert-w-primary" style="margin-top: 20px">
    Richiesta inviata! L'agenzia Immobiliare Bianchi ti contatterà a breve.
  </BaseAlert>
  <BaseAlert v-else-if="status === 'error'" alert-class="uikit-alert-w-danger" style="margin-top: 20px">
    Si è verificato un errore. Riprova tra qualche minuto.
  </BaseAlert>
</template>

Do / Don't

  • Always pass alertClass. Without it the box only gets padding and rounded corners, and its colors depend on which other stylesheets happen to be loaded.
  • It renders role="alert", so screen readers announce it when it appears. Don't use it for decorative or permanent page copy.
  • The slot accepts any markup (icons, links, bold text). For an icon + text row, make it a flex row with your own class or style="display: flex; align-items: center; gap: 12px".
  • Margins and width go in your own class/style; the box itself has no outer spacing.

Styling hooks

Classes uikit-alert (base: rounded, 16px padding, medium weight) plus the variant class. Override colors with utility classes in class.

API

Generated from the component's types. Do not edit by hand.

Props

Name Type Default Required Description
alertClass AlertClass ""

Events

None.

v-model

None.

Slots

Name Slot props
default

Exposed (template ref)

None.