Usage

Use Banner for persistent messages that require attention or action.

<script setup lang="ts">
import { Banner } from '@astryx-vue/core/Banner'
</script>

<template>
  <Banner
    status="success"
    title="Changes saved"
    description="Your settings are up to date."
    is-dismissable
  />
</template>

Import the theme once in the application entry:

import '@astryx-vue/themes/neutral.css'

Best practices

Guidance	Practices
Do	Pick a status that matches the message: info for updates, warning for caution, error for problems, success for confirmations.
Do	Use the card container inside page content and the section container for full-width messages that span the entire page.
Do	Make info and success banners dismissable. Keep error banners visible until the user fixes the issue.
Do	Keep titles short and scannable: "Payment failed" not "There was a problem processing your most recent payment."
Don't	Use Banner for short-lived messages that disappear on their own; use Toast instead.
Don't	Stack multiple banners with the same status; combine related messages into one banner.

Examples

Message states

An update is available

Restart the application to use the new version.

Changes saved

Your team can now use the updated settings.

Storage is nearly full

Remove unused files before uploading more content.

Changes could not be saved

Check your connection and try again.

Describe the message in the title. Do not rely on color alone.

Details

Two settings will change

Expand the details before continuing.

Two fields need attention

• Enter a valid email address.
• Choose at least one notification channel.

The default slot provides details. Set collapsible to false to keep them visible.

Actions and dismissal

Save failed

Try saving your settings again.

Put actions in the end slot. Dismissal hides the component.

Containers and elevation

Card notification

Use a rounded card inside page content.

Scheduled maintenance

The service will be unavailable during the maintenance window.

Use card inside page content. Use section for full-width notices.

Usage guidance

The status prop sets the tone of a banner, and picking the wrong one makes readers misjudge how urgent the message is. The list below covers which status fits which kind of message, plus two usages that are easy to overlook.

• Use info for general information and updates.
• Use success for the result of a successful action.
• Use warning for situations that call for caution.
• Use error for problems that block progress.
• Set :collapsible="false" for details that users must read, so those details stay visible and no click is needed to open them.
• Mount urgent messages when the user action that triggers them happens.

The status also decides the role the banner exposes to screen readers: warning and error use role="alert", while info and success use role="status". Note that messages already present in the initial page render may not be announced by screen readers, so the more urgent a message is, the better it works when mounted in response to a user action.

For a single field validation message, use FieldStatus.