Skip to content

Banner

Alert to convey information or actions

Usage

Simple usage

preview
vue
<template>
  <p-banner>
    Every sign will requires privy balance.
    Please make sure you have enough privy balance
    before sign the document(s)
  </p-banner>
</template>

With title

preview
vue
<template>
  <p-banner>
    <p-subheading>
      Your enterprise Privy Balance is running out.
    </p-subheading>
    <div class="text-sm">
      Every sign will requires privy balance. Please make sure you have enough privy balance before sign the document(s)
    </div>
  </p-banner>
</template>

With title and button

preview
vue
<template>
  <p-banner>
    <p-subheading>
      Your enterprise Privy Balance is running out.
    </p-subheading>
    <div class="text-sm">
      Every sign will requires privy balance.
      Please make sure you have enough privy balance
      before sign the document(s)
    </div>
    <div class="mt-3">
      <p-button variant="outline" size="sm">Top Up Balance</p-button>
      <p-button variant="link">Learn More</p-button>
    </div>
  </p-banner>
</template>

Custom Icon

preview
vue
<template>
  <p-banner>
    <template #icon>
      <IconCheck class="text-success" />
    </template>
    <span>
      Great! Your Privy ID and NPWP are verified.
    </span>
  </p-banner>

  <script setup>
  import IconCheck from '@privyid/persona-icon/vue/checkmark-circle-solid/20.vue'
  </script>
</template>

Variants

Banner have 3 variants: info, warning and danger, default is info

preview
vue
<template>
  <p-banner variant="info">
    Every sign will requires privy balance.
    Please make sure you have enough privy balance
    before sign the document(s)
  </p-banner>
  <p-banner variant="warning">
    Every sign will requires privy balance.
    Please make sure you have enough privy balance
    before sign the document(s)
  </p-banner>
  <p-banner variant="danger">
    Every sign will requires privy balance.
    Please make sure you have enough privy balance
    before sign the document(s)
  </p-banner>
</template>

Hide close button

You can hide close button with dismissable set to false

preview
vue
<template>
  <p-banner :dismissable="false">
    Every sign will requires privy balance.
    Please make sure you have enough privy balance
    before sign the document(s)
  </p-banner>
</template>

No Icon

preview
vue
<template>
  <p-banner variant="danger" :dismissable="false" noIcon>
    <p-subheading>
      Your e-Meterai balance is sufficient only for 2 placements
    </p-subheading>
    <span>
      You can continue with 2 e-Meterai or contact admin to top up then retry the process
    </span>
  </p-banner>
</template>

Custom background image

preview
vue
<template>
  <p-banner
    :dismissable="false"
    noIcon
    background-url="../assets/images/img-banner-bg.svg">
    <span class="text-default dark:text-dark-default">
      Buy and activate your Personal plan in
      <strong>Privy mobile app</strong>
    </span>
  </p-banner>
</template>

Variables

Banner use local CSS variables on .banner for enhanced real-time customization.

sass
--p-banner-padding-x: theme(spacing.4);
--p-banner-padding-y: theme(spacing.4);

API

Props

PropsTypeDefaultDescription
variantStringinfoBanner variant, valid value is info, warning & danger
dismissableBooleantrueShow / Hide dismiss button
backgroundUrlString-Custom background image of banner
backgroundDarkUrlString-Custom background image of banner in Dark Mode
backgroundOverlayBooleanfalseActivate background overlay of banner

Slots

NameDescription
defaultContent to place in banner
iconContent to place icon in banner

Events

NameArgumentsDescription
dismissed-Event when close button clicked

Released under the MIT License.