Kappa / Banner

<script setup>
import { Banner } from "@dicehub/kappa/components/banner";
</script>

<template>
  <Banner
    title="Update available"
    description="A new version is ready to install."
  >
    <template #icon>
      <svg viewBox="0 0 16 16" aria-hidden="true">
        <circle cx="8" cy="8" r="6" />
        <path d="M8 7v4M8 5h.01" />
      </svg>
    </template>
  </Banner>
</template>

Installation

Barrel

import { Banner, BannerAction } from "@dicehub/kappa";

Granular

import { Banner, BannerAction } from "@dicehub/kappa/components/banner";

Usage

Banner is a neutral container. Add role="status" when a routine update should be announced after the page loads.

<script setup>
import { Banner } from "@dicehub/kappa/components/banner";
</script>

<template>
  <Banner
    role="status"
    title="Mesh generated"
    description="The surface mesh is ready for review."
  >
    <template #icon>
      <svg viewBox="0 0 16 16" aria-hidden="true">
        <circle cx="8" cy="8" r="6" />
        <path d="M8 7v4M8 5h.01" />
      </svg>
    </template>
  </Banner>
</template>

Composition

Typical part hierarchy

Banner
├── #icon
├── #default
├── #description
└── #action
    └── Banner.Action

Banner uses named slots for its icon, primary message, description, and action area. Place Banner.Action in the action slot when the message needs a native button that inherits the banner accent and density.

Examples

Variants

Select a treatment that matches the message—not its live-region urgency. Theme tokens keep each variant consistent in light and dark modes.

<script setup>
import { Banner } from "@dicehub/kappa/components/banner";
</script>

<template>
  <Banner title="Update available" description="A new version is ready." />
  <Banner
    variant="alert"
    title="Session expiring"
    description="Your session will expire in 5 minutes."
  />
  <Banner
    variant="error"
    title="Save failed"
    description="We couldn't save your changes."
  />
  <Banner
    variant="secondary"
    title="Maintenance scheduled"
    description="This service will be unavailable for 10 minutes."
  />
</template>

With Icon

Use icon for a reusable component or the icon slot for inline SVG. Banner treats its leading icon as decorative.

<script setup>
import { h } from "vue";
import { Banner } from "@dicehub/kappa/components/banner";

const InfoIcon = (props) => h(
  "svg",
  { ...props, viewBox: "0 0 16 16", fill: "none" },
  [
    h("circle", { cx: 8, cy: 8, r: 6 }),
    h("path", { d: "M8 7v4M8 5h.01" }),
  ],
);
</script>

<template>
  <Banner
    :icon="InfoIcon"
    :icon-props="{ 'stroke-width': 1.75 }"
    title="Review required"
    description="Review the boundary conditions before running the case."
  />
</template>

With Action

Place Banner.Action in the action slot. It inherits the parent accent and density while remaining a native button.

<script setup>
import { Banner } from "@dicehub/kappa/components/banner";
</script>

<template>
  <Banner
    title="Update available"
    description="A new version is ready to install."
  >
    <template #action>
      <Banner.Action>Update now</Banner.Action>
      <Banner.Action variant="ghost">Dismiss</Banner.Action>
    </template>
  </Banner>
</template>

Multiple Actions

Use one clear primary action. A secondary action can defer or dismiss the message.

<script setup>
import { Banner, BannerAction } from "@dicehub/kappa/components/banner";
</script>

<template>
  <Banner
    variant="alert"
    title="Session expiring"
    description="Your session will expire in 5 minutes."
  >
    <template #action>
      <BannerAction variant="secondary">Dismiss</BannerAction>
      <BannerAction>Extend session</BannerAction>
    </template>
  </Banner>
</template>

Compact

Use size="sm" for concise, single-line notices in dense application layouts. Composed actions inherit the extra-small density and remain at the logical inline end.

<script setup>
import { Banner } from "@dicehub/kappa/components/banner";
</script>

<template>
  <Banner
    size="sm"
    description="A DNS record for solver.dicehub.dev already exists in this zone."
  >
    <template #action>
      <Banner.Action>Manage DNS</Banner.Action>
    </template>
  </Banner>
</template>

Custom Description

The description slot supports inline emphasis and links without replacing the layout.

<script setup>
import { Banner } from "@dicehub/kappa/components/banner";
</script>

<template>
  <Banner title="Custom content supported">
    <template #description>
      Read the <a href="/docs/installation">installation guide</a>
      before updating the workspace.
    </template>
  </Banner>
</template>

Right-to-left

Logical alignment keeps the icon, content, and actions ordered correctly in RTL layouts.

<script setup>
import { Banner } from "@dicehub/kappa/components/banner";
</script>

<template>
  <div dir="rtl">
    <Banner
      variant="secondary"
      title="اكتمل التحليل"
      description="النتائج جاهزة للمراجعة."
    >
      <template #action>
        <Banner.Action>عرض النتائج</Banner.Action>
      </template>
    </Banner>
  </div>
</template>

Accessibility

Banner does not add a role or live-region behavior by default.
Use role="status" for routine, non-urgent updates inserted after page load.
Reserve role="alert" for urgent errors inserted or updated after page load.
Do not choose a role from the visual variant alone. Static page content usually needs no role.
An alert announces content but never moves focus. Use a dialog when an immediate response is required.
Keep icon meaning redundant with visible copy; the leading icon is decorative.
Use concise action labels and preserve a visible keyboard focus indicator.

See the WAI-ARIA Alert Patternfor live-region behavior and focus guidance.

<script setup>
import { Banner } from "@dicehub/kappa/components/banner";
</script>

<template>
  <Banner
    role="status"
    title="Export complete"
    description="The report is ready to download."
  />

  <Banner
    role="alert"
    variant="error"
    title="Connection lost"
    description="Changes are no longer being saved."
  />
</template>

API Reference

Forwards remaining native attributes, ARIA properties, listeners, and data attributes.

Prop	Type	Default	Description
`variant`	`"default" \| "alert" \| "error" \| "secondary"`	`"default"`	Selects the semantic visual treatment.
`size`	`"base" \| "sm"`	`"base"`	Sets the banner density and the size of composed actions.
`icon`	`Component`	`-`	Vue component rendered before the banner copy.
`iconProps`	`Record<string, unknown>`	`{}`	Props forwarded to the icon component.
`title`	`string`	`-`	Primary text for structured content.
`description`	`string`	`-`	Supporting text for structured content.
`text`	`string`	`-`	Fallback text when structured content is omitted.

Slot	Description
`default`	Simple content used when title and description are omitted.
`icon`	Custom leading icon markup.
`description`	Rich supporting content for structured banners.
`action`	One or more actions placed after the banner copy.

Forwards native button attributes and events to its <button>.

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "ghost"`	`"primary"`	Sets the action treatment while retaining the parent banner accent.
`disabled`	`boolean`	`false`	Disables the native button.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Sets the native button type.

Kappa's native action intentionally omits icon,iconProps, loading, and shape. Compose icon markup in the default slot and manage pending state with visible text plus disabled.

Export	Description
`Banner`	Root banner with structured and slotted content APIs.
`BannerAction`	Native button action, also available as Banner.Action.
`BannerRoot`	Unaugmented root component.
`BANNER_VARIANTS`	Readonly map of supported banner variants.
`BANNER_SIZES`	Readonly map of supported banner sizes.
`BANNER_DEFAULT_VARIANT`	Default banner variant.
`BANNER_DEFAULT_SIZE`	Default banner size.
`BANNER_ACTION_VARIANTS`	Readonly list of action variants.
`BANNER_ACTION_TYPES`	Readonly list of native button types.
`BANNER_ACTION_DEFAULT_VARIANT`	Default action variant.
`BANNER_ACTION_DEFAULT_TYPE`	Default native button type.
`BANNER_ACTION_DEFAULT_SIZE`	Fallback action size outside Banner.
`BANNER_ACTION_SIZE_BY_BANNER`	Maps banner density to action density.
`isBannerVariant`	Runtime banner-variant type guard.
`isBannerSize`	Runtime banner-size type guard.
`isBannerActionVariant`	Runtime action-variant type guard.
`isBannerActionType`	Runtime action-type guard.
`resolveBannerVariant`	Resolves unknown input to a banner variant.
`resolveBannerSize`	Resolves unknown input to a banner size.
`resolveBannerActionVariant`	Resolves unknown input to an action variant.
`resolveBannerActionType`	Resolves unknown input to a native button type.
`BannerProps`	Public root props.
`BannerSlots`	Public root slot contract.
`BannerVariant`	Supported banner-variant union.
`BannerSize`	Supported banner-size union.
`BannerActionProps`	Public action props.
`BannerActionSlots`	Public action slot contract.
`BannerActionVariant`	Supported action-variant union.
`BannerActionType`	Supported native button-type union.
`BannerActionSize`	Contextual action-size union.