Banner · 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 { JBanner } from '@juxtui/ui'

Usage #

<JBanner variant="warning" title="Your trial ends in 3 days" description="Add a payment method to keep access.">
  <template #actions>
    <JButton variant="outline" size="sm">Add payment method</JButton>
  </template>
</JBanner>

Banners run edge-to-edge and use a tinted fill with a left accent bar — JAlert sits inline in a card or form with a plain bordered surface instead. Pick banner for page- or section-level notices, alert for local ones.

Dismissing is left to you: dismissible shows the close button and emits dismiss, but the banner stays mounted until you act on it (see the v-if in the dismissible example).

Variants & examples #

Variants#

<template>
  <div class="flex w-full flex-col gap-3">
    <JBanner variant="neutral" title="Scheduled maintenance" description="Sunday 2am–4am UTC." />
    <JBanner variant="info" title="New: keyboard shortcuts" description="Press ? anywhere to see the list." />
    <JBanner variant="success" title="Deployment succeeded" description="juxt.dev is live on the latest build." />
    <JBanner variant="destructive" title="Payment failed" description="Update your billing details to avoid service interruption." />
  </div>
</template>

Dismissible#

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

const visible = ref(true)
</script>

<template>
  <JBanner
    v-if="visible"
    variant="info"
    title="You're viewing a preview environment"
    description="Data here resets nightly and isn't sent to production."
    dismissible
    @dismiss="visible = false"
  />
</template>

API #

Props

Prop	Type	Default	Description
variant	`'neutral' \| 'info' \| 'success' \| 'warning' \| 'destructive'`	`'neutral'`	Accent colour, fill and default icon.
title	`string`	—	Heading. Also used as the region’s accessible name.
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 at the end of the banner.

Accessibility #

Rendered as role="region" labelled by title, so it’s reachable as a landmark when one is set.
The variant icon is aria-hidden; colour and icon both reinforce the text rather than replace it.