Skip to content

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.

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

Props

alertMessage

The main content of the alert.

isShowing

Set whether or not the alert box is shown.

Note: By default is-showing is set to true.

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

type

The display type of the alert.

Note: By default appearance="info".

  • alert (default)
html
<KAlert alert-message="I'm an alert" />
  • banner

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

html
<KAlert
  alert-message="I'm a banner type alert"
  type="banner"
/>

dismissType

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

  • none (default)
  • icon
  • button
html
<KAlert
  alert-message="Alert that can not be dismissed"
  type="alert"
  dismiss-type="none"
/>

<KAlert
  alert-message="Info alert message that is dismissible"
  dismiss-type="icon"
  :is-showing="isShowing"
  @closed="isShowing = false"
/>

<KAlert
  alert-message="Alert with dismiss type as button"
  type="banner"
  dismiss-type="button"
  :is-showing="isShowing"
  @closed="isShowing = false"
/>

appearance

What color and purpose the Alert should be. Shares similar appearances to those of KButton. appearance will influence the colors of action/dismiss buttons.

  • info (default)
html
<KAlert alert-message="Info alert message" />

<KAlert
  :is-showing="isShowing"
  alert-message="Info alert message that is dismissible"
  dismiss-type="icon"
  @closed="isShowing = false"
/>

<KAlert
  :is-showing="isShowing"
  alert-message="I'm an alert"
  dismiss-type="button"
  @closed="isShowing = false"
/>

<KAlert
  alert-message="I'm a banner type alert"
  type="banner"
/>

<KAlert
  :is-showing="isShowing"
  alert-message="Alert with dismiss type as button"
  type="banner"
  dismiss-type="button"
  @closed="isShowing = false"
/>
  • warning
html
<KAlert
  alert-message="Warning alert message"
  appearance="warning"
/>

<KAlert
  :is-showing="isShowing"
  alert-message="Alert message that is dismissible"
  dismiss-type="icon"
  appearance="warning"
  @closed="isShowing = false"
/>

<KAlert
  :is-showing="isShowing"
  alert-message="I'm an alert"
  dismiss-type="button"
  appearance="warning"
  @closed="isShowing = false"
/>

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

<KAlert
  :is-showing="isShowing"
  alert-message="Alert with dismiss type as button"
  type="banner"
  dismiss-type="button"
  appearance="warning"
  @closed="isShowing = false"
/>
  • success
html
<KAlert
  alert-message="Success alert message"
  appearance="success"
/>

<KAlert
  :is-showing="isShowing"
  alert-message="Alert message that is dismissible"
  dismiss-type="icon"
  appearance="success"
  @closed="isShowing = false"
/>

<KAlert
  :is-showing="isShowing"
  alert-message="I'm an alert"
  dismiss-type="button"
  appearance="success"
  @closed="isShowing = false"
/>

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

<KAlert
  :is-showing="isShowing"
  alert-message="Alert with dismiss type as button"
  type="banner"
  dismiss-type="button"
  appearance="success"
  @closed="isShowing = false"
/>
  • danger
html
<KAlert
  alert-message="Danger alert message"
  appearance="danger"
/>

<KAlert
  :is-showing="isShowing"
  alert-message="Alert message that is dismissible"
  dismiss-type="icon"
  appearance="danger"
  @closed="isShowing = false"
/>

<KAlert
  :is-showing="isShowing"
  alert-message="I'm an alert"
  dismiss-type="button"
  appearance="danger"
  @closed="isShowing = false"
/>

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

<KAlert
  :is-showing="isShowing"
  alert-message="Alert with dismiss type as button"
  type="banner"
  dismiss-type="button"
  appearance="danger"
  @closed="isShowing = false"
/>

size

Controls size (height) and default font-size of an alert.

  • small
html
<KAlert
  size="small"
  alert-message="Small alert"
/>
  • large

size="large" allows further customization options. You can specify an icon, description text, and additional buttons using the actionButtons slot. See the full Example.

icon

Specify an icon to display to the left of the alert content. If using type="banner" this will override the colored ellipse.

Note: only available with size="large".

iconSize

The size of the icon being displayed (default is 24).

iconColor

The color of the icon being displayed.

description

Descriptive text to be displayed below the main alert content.

Note: only available with size="large".

html
<KAlert
  :is-showing="isShowing"
  alert-message="You’ve had 12 new mentions since you last logged in"
  description="across 3 services"
  dismiss-type="button"
  type="banner"
  icon="support"
  icon-color="darkorchid"
  size="large"
  @closed="isShowing = false"
>
  <template #actionButtons>
    <KButton appearance="primary" size="small">Review</KButton>
  </template>
</KAlert>

title

You can specify a title for the alert in situations where the message is more wordy. This content is displayed directly above the main alert content.

html
<KAlert
  :is-showing="isShowing"
  title="Error: Something went wrong!"
  alert-message="Since I have a title, my font-size is smaller."
  appearance="danger"
  @closed="isShowing = false"
>
  <template #icon>
    <KIcon icon="errorFilled" color="salmon" size="16" />
  </template>
</KAlert>

isBordered

Adds border around alert. Used for KToaster.

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

hasLeftBorder

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

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

hasRightBorder

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

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

hasTopBorder

Adds border to the top.

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

hasBottomBorder

Adds border to the bottom.

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

isFixed

Fixes KAlert to the top of the container.

Note: Not demoed

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

Slots

  • alertMessage - Default message slot
  • icon - Icon to the left of the main alert content
  • title - Text displayed directly above the main alert content (font will be bolded)
  • description - Descriptive text displayed directly beneath the main alert content (size='large' required)
  • actionButtons - Slot specifically meant for adding buttons other than Dismiss button
html
<KAlert
  :is-showing="isShowing"
  dismiss-type="button"
  size="large"
  appearance="success"
  @closed="isShowing = false"
>
  <template #icon>
    <KIcon icon="lock" size="20" color="green" />
  </template>
  <template #title>
    Look, Mah!
  </template>
  <template #alertMessage>
    Check out my awesome slots
  </template>
  <template #description>
    I like cats 🐈‍⬛
  </template>
  <template #actionButtons>
    <KButton appearance="secondary" size="small">🐈‍⬛</KButton>
    <KButton appearance="creation" size="small">🐶</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

html
<KAlert appearance="info" class="vertical-spacing">
  <template #alertMessage>
    <strong>Failure Modes</strong>
    <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

html
<KAlert appearance="warning" class="vertical-spacing">
  <template #alertMessage>
    Proxy error: Could not proxy request /api/service_packages?fields=&s=%7B%22%24and%22%3A%5B%7B%22name%22%3A%7B%22%24contL%22%3A%22%22%7D%7D%5D%7D&filter=&or=&sort=created_at%2CDESC&join=&limit=100&offset=0&page=1 from localhost:8080 to http://localhost:3000 (ECONNREFUSED).
  </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

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

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

Released under the Apache-2.0 License.