Alert · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JAlert } from '@juxtui/ui'

Usage #

<JAlert variant="warning" title="Low disk space" description="Free up space to keep syncing." dismissible @dismiss="onDismiss" />

Colour lives in the icon and a hairline border, not a filled background — enough to be noticed, never enough to shout. For a louder, page-width notice reach for JBanner instead.

Like JBanner, dismissible only shows the button and emits dismiss — removing the alert from the DOM is up to you.

Variants & examples #

Variants#

Heads up

This workspace is read-only for guests.

Changes saved

Your profile has been updated.

Low disk space

Free up space to keep syncing.

Upload failed

The file exceeds the 25MB limit.

<template>
  <div class="flex w-full flex-col gap-3">
    <JAlert variant="neutral" title="Heads up" description="This workspace is read-only for guests." />
    <JAlert variant="success" title="Changes saved" description="Your profile has been updated." />
    <JAlert variant="warning" title="Low disk space" description="Free up space to keep syncing." />
    <JAlert variant="destructive" title="Upload failed" description="The file exceeds the 25MB limit." />
  </div>
</template>

With actions#

Buttons sit under the description, inside the body.

Delete this workspace?

This removes all projects and can't be undone.

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(true)
</script>

<template>
  <JAlert
    v-if="visible"
    variant="destructive"
    title="Delete this workspace?"
    description="This removes all projects and can't be undone."
    dismissible
    @dismiss="visible = false"
  >
    <template #actions>
      <JButton variant="destructive" size="sm">Delete</JButton>
      <JButton variant="ghost" size="sm" @click="visible = false">Cancel</JButton>
    </template>
  </JAlert>
</template>

API #

Props

Prop	Type	Default	Description
variant	`'neutral' \| 'info' \| 'success' \| 'warning' \| 'destructive'`	`'neutral'`	Accent colour, border and default icon.
title	`string`	—	Heading.
description	`string`	—	Supporting text. Overridden by the default slot.
dismissible	`boolean`	`false`	Show a close button; emits `dismiss` on click.
hideIcon	`boolean`	`false`	Hide the leading icon.

Events

Event	Payload	Description
dismiss	`void`	The close button was clicked.

Slots

Slot	Props	Description
default	—	Replaces `description` with custom content.
icon	—	Replaces the default variant icon.
actions	—	Buttons shown below the description, inside the body.

Accessibility #

Unlike JToaster, an alert doesn’t announce itself — it has no role="alert" or live region, since it’s meant to be part of the page’s static content, not an interruption. Wrap it yourself if it appears in response to an action and needs to be announced.
The variant icon is aria-hidden; colour and icon both reinforce the text rather than replace it.