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.

I'm an alert

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)

I'm an alert

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

Alert that can not be dismissed

Info alert message that is dismissible

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)

Info alert message

Info alert message that is dismissible

I'm an alert

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

Warning alert message

Alert message that is dismissible

I'm an alert

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

Success alert message

Alert message that is dismissible

I'm an alert

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

Danger alert message

Alert message that is dismissible

I'm an alert

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

Small alert

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.

Error: Something went wrong!

Since I have a title, my font-size is smaller.

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.

Info bordered

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.

Bordered alert

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.

Bordered alert

html

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

hasTopBorder

Adds border to the top.

Bordered alert

html

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

hasBottomBorder

Adds border to the bottom.

Bordered alert

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

Look, Mah!

Check out my awesome slots

I like cats 🐈‍⬛

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

Failure Modes

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 domineering, bottlenecked, status-oriented, or inert.

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

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).

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

Variable	Purpose
`--KAlertInfoColor`	Info variant text color
`--KAlertInfoBorder`	Info variant border
`--KAlertInfoBackground`	Info variant background color
`--KAlertSuccessColor`	Success variant text color
`--KAlertSuccessBorder`	Success variant border
`--KAlertSuccessBackground`	Success variant background color
`--KAlertDangerColor`	Danger variant text color
`--KAlertDangerBorder`	Danger variant border
`--KAlertDangerBackground`	Danger variant background color
`--KAlertWarningColor`	Warning variant text color
`--KAlertWarningBorder`	Warning variant border
`--KAlertWarningBackground`	Warning 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

Im Lime

html

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

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

Alert ​

Props ​

alertMessage ​

isShowing ​

type ​

dismissType ​

appearance ​

size ​

icon ​

iconSize ​

iconColor ​

description ​

title ​

isBordered ​

hasLeftBorder ​

hasRightBorder ​

hasTopBorder ​

hasBottomBorder ​

isFixed ​

Slots ​

Events ​

Variations ​

Long Content / Prose ​

Word Wrap long urls ​

Theming ​

Alert

Props

alertMessage

isShowing

type

dismissType

appearance

size

icon

iconSize

iconColor

description

title

isBordered

hasLeftBorder

hasRightBorder

hasTopBorder

hasBottomBorder

isFixed

Slots

Events

Variations

Long Content / Prose

Word Wrap long urls

Theming