Kongponents (Vue 3 Beta)

Alert

KAlert is used to display contextual information to a user. These are typically used to notify something may be disabled or there may be an error.

<KAlert alert-message="I'm an alert" />

Props

alertMessage

You can pass in the alert message (as a string) if you are not utilizing the alertMessage slot.

<KAlert alert-message="This is the alert message." />

appearance

What color and purpose the Alert should be. Shares similar appearances to those of KButton.

Note: appearance is info by default.

  • info
  • warning
  • success
  • danger
<KAlert appearance="info" alert-message="Info alert message" />
<KAlert appearance="warning" alert-message="Warning alert message" />
<KAlert appearance="success" alert-message="Success alert message" />
<KAlert appearance="danger" alert-message="Danger alert message" />

type

The display type of the alert.

  • banner

type="banner" will have a white background and display an ellipse on the left to indicate appearance.

Note: By default appearance="info". appearance will influence the colors of action/dismiss buttons.

<KAlert alert-message="I'm a banner type alert" type="banner" />
<KAlert alert-message="I'm a banner type alert" appearance="success" type="banner" />
<KAlert alert-message="I'm a banner type alert" appearance="danger" type="banner" />
<KAlert alert-message="I'm a banner type alert" appearance="warning" type="banner" />
  • alert

type="alert" will have a background based on appearance.

Note: By default appearance="info". appearance will influence the colors of action/dismiss buttons.

<KAlert alert-message="I'm an alert" dismissType="button" type="alert" :isShowing="alert1IsOpen" @closed="alert1IsOpen = false" />
<KAlert alert-message="I'm an alert" dismissType="button" appearance="success" type="alert" :isShowing="alert2IsOpen" @closed="alert2IsOpen = false" />
<KAlert alert-message="I'm an alert" dismissType="button" appearance="danger" type="alert" :isShowing="alert3IsOpen" @closed="alert4IsOpen = false" />
<KAlert alert-message="I'm an alert" dismissType="button" appearance="warning" type="alert" :isShowing="alert5IsOpen" @closed="alert5IsOpen = false" />

dismissType

KAlert allows for dismissal of the banner using an icon or button. An alert is not dismissible if "none" is passed.

  • none
  • icon
  • button
<KAlert alert-message="Alert that can not be dismissed" type="alert" dismissType="none" />
<KAlert alert-message="Info alert message that is dismissible" appearance="info" type="alert" dismissType="icon" :isShowing="infoIsOpen" @closed="infoIsOpen = false" />
<KAlert alert-message="Warning alert message that is dismissible" appearance="warning" type="alert" dismissType="icon" :isShowing="warningIsOpen" @closed="warningIsOpen = false" />
<KAlert alert-message="Success alert message that is dismissible" appearance="success" type="alert" dismissType="icon" :isShowing="successIsOpen" @closed="successIsOpen = false" />
<KAlert alert-message="Danger alert message that is dismissible" appearance="danger" type="alert" dismissType="icon" :isShowing="dangerIsOpen" @closed="dangerIsOpen = false" />
<KAlert alert-message="Alert with dismiss type as button" type="banner" dismissType="button" :isShowing="dismissTypeBtn" @closed="defaultIdismissTypeBtnsOpen = false"/>

isShowing

Set whether or not the alert box is shown.

Note: By default isShowing is set to true.

<KAlert :is-showing="false" alert-message="isShowing set to false"/>

isBordered

Adds border around alert. Used for KToaster.

<KAlert is-bordered appearance="info" alert-message="Info bordered"/>

hasLeftBorder

Adds border to the left side. Typically used for alerts that show info that may link away like documentation.

<KAlert has-left-border alert-message="Bordered alert"/>

hasRightBorder

Adds border to the right side. Typically used for alerts that show info that may link away like documentation.

  • has-right-border
<KAlert has-right-border alert-message="Bordered alert"/>

hasTopBorder

Adds border to the top.

<KAlert has-top-border alert-message="Bordered alert"/>

hasBottomBorder

Adds border to the bottom.

<KAlert has-bottom-border alert-message="Bordered alert"/>

size

Controls size of alert.

  • small
<KAlert style="width:250px" size="small" alert-message="Small alert"/>
  • large

size="large" type="banner" allows further customization options. You can specify an icon to be displayed on the left in place of the colored ellipse using the icon property, description text to be displayed below the main alert message using the description slot and additional buttons using the actionButtons slot.

<KAlert type="banner" dismissType="button" appearance="warning" icon="support" size="large" :isShowing="extraMsg" @closed="extraMsg = false">
  <template v-slot:actionButtons>
    <KButton appearance="primary" size="small">Review</KButton></template>
  <template v-slot:alertMessage>
    You’ve had 12 new mentions since you last logged in
  </template>
  <template v-slot:description>
    across 3 services
  </template>
</KAlert>

isFixed

Fixes KAlert to the top of the container.

Note: Not demoed

  • is-fixed
<KAlert is-fixed alert-message="Info bordered"/>

Slots

  • actionButtons - Slot specifically meant for adding buttons other than Dismiss button
  • alertMessage - Default message slot
  • description - Alert message description slot available when these conditions are met: type='banner', size='large' and alertMessage slot is rendered
<KAlert type="banner" dismissType="button" appearance="success" :isShowing="extraBtnSlot" @closed="extraBtnSlot = false">
    <template v-slot:alertMessage>
    I'm an alert with action buttons
  </template>
 <template v-slot:actionButtons>
    <KButton appearance="primary" size="small">Upgrade</KButton>
    <KButton appearance="primary" size="small">Downgrade</KButton>
  </template>
</KAlert>

Events

  • @closed - emitted when the dismiss button is clicked
  • @proceed - emitted when a default action button is clicked

Variations

Long Content / Prose

<KAlert appearance="info" class="mt-5">
  <template v-slot:alertMessage>
    <div class="mt-2 bold">Failure Modes</div>
    <p>Before you release that email you're writing to spin up a new centralized decision-making group, it's worth talking about the four ways these groups consistently fail. They tend to be <b>domineering</b>, <b>bottlenecked</b>, <b>status-oriented</b>, or <b>inert</b>.</p>
  </template>
</KAlert>

Word Wrap long urls

<KAlert appearance="info" class="mt-5">
  <template v-slot:alertMessage>
    <div class="mt-2 bold">Failure Modes</div>
    <p>Before you release that email you're writing to spin up a new centralized decision-making group, it's worth talking about the four ways these groups consistently fail. They tend to be <b>domineering</b>, <b>bottlenecked</b>, <b>status-oriented</b>, or <b>inert</b>.</p>
  </template>
</KAlert>

Theming

VariablePurpose
--KAlertInfoColorInfo variant text color
--KAlertInfoBorderInfo variant border
--KAlertInfoBackgroundInfo variant background color
--KAlertSuccessColorSuccess variant text color
--KAlertSuccessBorderSuccess variant border
--KAlertSuccessBackgroundSuccess variant background color
--KAlertDangerColorDanger variant text color
--KAlertDangerBorderDanger variant border
--KAlertDangerBackgroundDanger variant background color
--KAlertWarningColorWarning variant text color
--KAlertWarningBorderWarning variant border
--KAlertWarningBackgroundWarning variant background color


An Example of changing the success KAlert variant to lime instead of Kong's green might look like.

Note: We are scoping the overrides to a wrapper in this example

<template>
  <div class="alert-wrapper">
    <KAlert appearance="success" alert-message="Im Lime" />
  </div>
</template>

<style>
.alert-wrapper {
  --KAlertSuccessBackground: lime;
  --KAlertSuccessColor: forestgreen;
}
</style>