Phi / Banner

Preview

<script setup>
import { PhInfo, PhWarning, PhWarningCircle } from "@phosphor-icons/vue";
import { Banner } from "@dicehub/phi/components/banner";
</script>

<template>
  <div class="w-full space-y-3">
    <Banner
      :icon="PhInfo"
      :icon-props="{ weight: 'fill' }"
      title="Update available"
      description="A new version is ready to install."
    />
    <Banner
      :icon="PhWarning"
      :icon-props="{ weight: 'fill' }"
      variant="alert"
      title="Session expiring"
      description="Your session will expire in 5 minutes."
    />
    <Banner
      :icon="PhWarningCircle"
      :icon-props="{ weight: 'fill' }"
      variant="error"
      title="Save failed"
      description="We couldn't save your changes. Please try again."
    />
    <Banner
      :icon="PhInfo"
      :icon-props="{ weight: 'fill' }"
      variant="secondary"
      title="Maintenance scheduled"
      description="This service will be unavailable for 10 minutes."
    />
  </div>
</template>

Import

Use the root package while prototyping, or the component entrypoint for granular imports.

import { Banner } from "@dicehub/phi";
// or use the component entrypoint:
// import { Banner } from "@dicehub/phi/components/banner";

Usage

<script setup>
import { PhInfo } from "@phosphor-icons/vue";
import { Banner } from "@dicehub/phi/components/banner";
</script>

<template>
  <Banner
    :icon="PhInfo"
    :icon-props="{ weight: 'fill' }"
    title="Update available"
    description="A new version is ready to install."
  />
</template>

Use title and description for structured, translatable copy. Place Banner.Action inside the action slot so CTAs inherit the banner accent and density.

Examples

Variants

Default

<script setup>
import { PhInfo } from "@phosphor-icons/vue";
import { Banner } from "@dicehub/phi/components/banner";
</script>

<template>
  <Banner
    :icon="PhInfo"
    :icon-props="{ weight: 'fill' }"
    title="Update available"
    description="A new version is ready to install."
  />
</template>

Alert

<script setup>
import { PhWarning } from "@phosphor-icons/vue";
import { Banner } from "@dicehub/phi/components/banner";
</script>

<template>
  <Banner
    :icon="PhWarning"
    :icon-props="{ weight: 'fill' }"
    variant="alert"
    title="Session expiring"
    description="Your session will expire in 5 minutes."
  />
</template>

Error

<script setup>
import { PhWarningCircle } from "@phosphor-icons/vue";
import { Banner } from "@dicehub/phi/components/banner";
</script>

<template>
  <Banner
    :icon="PhWarningCircle"
    :icon-props="{ weight: 'fill' }"
    variant="error"
    title="Save failed"
    description="We couldn't save your changes. Please try again."
  />
</template>

Secondary

<script setup>
import { PhInfo } from "@phosphor-icons/vue";
import { Banner } from "@dicehub/phi/components/banner";
</script>

<template>
  <Banner
    :icon="PhInfo"
    :icon-props="{ weight: 'fill' }"
    variant="secondary"
    title="Maintenance scheduled"
    description="This service will be unavailable for 10 minutes."
  />
</template>

With Icon

<script setup>
import { PhWarning } from "@phosphor-icons/vue";
import { Banner } from "@dicehub/phi/components/banner";
</script>

<template>
  <Banner
    :icon="PhWarning"
    :icon-props="{ weight: 'fill' }"
    variant="alert"
    title="Review required"
    description="Please review your billing information before proceeding."
  />
</template>

With Action

<script setup>
import { PhInfo, PhWarningCircle, PhX } from "@phosphor-icons/vue";
import { Banner } from "@dicehub/phi/components/banner";
</script>

<template>
  <div class="w-full space-y-3">
    <Banner
      :icon="PhInfo"
      :icon-props="{ weight: 'fill' }"
      title="Update available"
      description="A new version is ready to install."
    >
      <template #action>
        <Banner.Action>Update now</Banner.Action>
        <Banner.Action variant="ghost" :icon="PhX" aria-label="Dismiss update" />
      </template>
    </Banner>
    <Banner
      :icon="PhWarningCircle"
      :icon-props="{ weight: 'fill' }"
      variant="error"
      title="Save failed"
      description="We couldn't save your changes. Please try again."
    >
      <template #action>
        <Banner.Action>Retry</Banner.Action>
        <Banner.Action variant="ghost" :icon="PhX" aria-label="Dismiss error" />
      </template>
    </Banner>
    <Banner
      :icon="PhInfo"
      :icon-props="{ weight: 'fill' }"
      variant="secondary"
      title="Maintenance scheduled"
      description="This service will be unavailable for 10 minutes."
    >
      <template #action>
        <Banner.Action>Got it</Banner.Action>
        <Banner.Action variant="ghost" :icon="PhX" aria-label="Dismiss notice" />
      </template>
    </Banner>
  </div>
</template>

With Multiple Actions

<script setup>
import { PhWarning } from "@phosphor-icons/vue";
import { Banner } from "@dicehub/phi/components/banner";
</script>

<template>
  <Banner
    :icon="PhWarning"
    :icon-props="{ weight: 'fill' }"
    variant="alert"
    title="Session expiring"
    description="Your session will expire in 5 minutes."
  >
    <template #action>
      <Banner.Action variant="secondary">Dismiss</Banner.Action>
      <Banner.Action>Extend session</Banner.Action>
    </template>
  </Banner>
</template>

Compact Size

Use size="sm" in dialogs and other constrained layouts. Prefer a Phi Link for supporting actions; a single link renders inline with the description. Use Banner.Action when the action needs more emphasis.

With Inline Link

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

<template>
  <Banner
    size="sm"
    description="A DNS record for puppies.example.com already exists in this zone."
  >
    <template #action>
      <Link href="/dns/records">Manage DNS for puppies.example.com</Link>
    </template>
  </Banner>
</template>

With CTA

<script setup>
import { PhX } from "@phosphor-icons/vue";
import { Banner } from "@dicehub/phi/components/banner";
</script>

<template>
  <Banner
    size="sm"
    description="A DNS record for puppies.example.com already exists in this zone."
  >
    <template #action>
      <Banner.Action>Manage DNS</Banner.Action>
      <Banner.Action variant="ghost" :icon="PhX" aria-label="Dismiss compact banner" />
    </template>
  </Banner>
</template>

Without Action

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

<template>
  <Banner
    size="sm"
    description="A DNS record for puppies.example.com already exists in this zone."
  />
</template>

Custom Content

<script setup>
import { PhInfo } from "@phosphor-icons/vue";
import { Banner } from "@dicehub/phi/components/banner";
</script>

<template>
  <Banner
    :icon="PhInfo"
    :icon-props="{ weight: 'fill' }"
    title="Custom content supported"
  >
    <template #description>
      This banner supports <strong>custom content</strong> in the description slot.
    </template>
  </Banner>
</template>

API

Banner

Prop	Type	Default	Description
`variant`	`"default" \| "alert" \| "error" \| "secondary"`	`"default"`	Sets the visual style and action accent of the banner.
`size`	`"base" \| "sm"`	`"base"`	Sets banner density. Compact banners render a single Link action inline and Banner.Action at the xs button size.
`icon`	`Component`	`-`	Vue component rendered before the banner content.
`iconProps`	`Record<string, unknown>`	`{}`	Props forwarded to the icon component.
`title`	`string`	`-`	Primary heading text for structured banners.
`description`	`string`	`-`	Secondary description text below the title.
`text`	`string`	`-`	Simple fallback text when no structured title or description is passed.

Banner.Action

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "ghost"`	`"primary"`	Sets the CTA treatment while retaining the parent banner accent.
`icon`	`Component`	`-`	Optional icon component. Icon-only actions should include an aria-label.
`iconProps`	`Record<string, unknown>`	`{}`	Props forwarded to the icon component.
`disabled`	`boolean`	`false`	Disables the underlying button.
`loading`	`boolean`	`false`	Shows the button loading state and disables interaction.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Native button type.

Slots

Slot	Description
`default`	Simple banner content used when title and description are omitted.
`icon`	Custom leading icon markup. Prefer the icon prop for standard icon components.
`description`	Custom description content for structured banners.
`action`	Action slot. A single Link renders inline in compact banners; Banner.Action remains trailing.