AlertController

Improve this doc

An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a title, subTitle and message.

You can pass all of the alert's options in the first argument of the create method: create(opts). Otherwise the alert's instance has methods to add options, such as setTitle() or addButton().

Alert Buttons

In the array of buttons, each button includes properties for its text, and optionally a handler. If a handler returns false then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the buttons array, from left to right. Note: The right most button (the last one in the array) is the main button.

Optionally, a role property can be added to a button, such as cancel. If a cancel role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.

Alert Inputs

Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text"" inputs can be mixed, such as url, email, text, etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.

Usage

import { AlertController } from 'ionic-angular';

constructor(public alertCtrl: AlertController) { }

presentAlert() {
  const alert = this.alertCtrl.create({
    title: 'Low battery',
    subTitle: '10% of battery remaining',
    buttons: ['Dismiss']
  });
  alert.onDidDismiss(() => console.log('Alert was dismissed by the user'));
  alert.present();
}

presentConfirm() {
  const alert = this.alertCtrl.create({
    title: 'Confirm purchase',
    message: 'Do you want to buy this book?',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Buy',
        handler: () => {
          console.log('Buy clicked');
        }
      }
    ]
  });
  alert.onDidDismiss(() => console.log('Alert was dismissed by the user'));
  alert.present();
}

presentPrompt() {
  const alert = this.alertCtrl.create({
    title: 'Login',
    inputs: [
      {
        name: 'username',
        placeholder: 'Username'
      },
      {
        name: 'password',
        placeholder: 'Password',
        type: 'password'
      }
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: data => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Login',
        handler: data => {
          if (User.isValid(data.username, data.password)) {
            // logged in!
          } else {
            // invalid login
            return false;
          }
        }
      }
    ]
  });
  alert.present();
}

Instance Members

`config`

`create(opts)`

Display an alert with a title, inputs, and buttons

Param	Type	Details
opts	`AlertOptions`	Alert. See the table below

Advanced

Alert options

Property	Type	Description
title	`string`	The title for the alert.
subTitle	`string`	The subtitle for the alert.
message	`string`	The message for the alert.
cssClass	`string`	Additional classes for custom styles, separated by spaces.
inputs	`array`	An array of inputs for the alert. See input options.
buttons	`array`	An array of buttons for the alert. See buttons options.
enableBackdropDismiss	`boolean`	Whether the alert should be dismissed by tapping the backdrop. Default true.

Input options

Property	Type	Description
type	`string`	The type the input should be: text, tel, number, etc.
name	`string`	The name for the input.
placeholder	`string`	The input's placeholder (for textual/numeric inputs)
value	`string`	The input's value.
label	`string`	The input's label (only for radio/checkbox inputs)
checked	`boolean`	Whether or not the input is checked.
disabled	`boolean`	Whether or not the input is disabled.
id	`string`	The input's id.

Button options

Property	Type	Description
text	`string`	The buttons displayed text.
handler	`any`	Emitted when the button is pressed.
cssClass	`string`	An additional CSS class for the button.
role	`string`	The buttons role, null or `cancel`.

Detecting dismissal

Any dismissal of the alert (including backdrop) can be detected using the method onDidDismiss(() => {}).

After an alert has been dismissed, the app may need to also transition to another page depending on the handler's logic. However, because multiple transitions were fired at roughly the same time, it's difficult for the nav controller to cleanly animate multiple transitions that may have been kicked off asynchronously. This is further described in the Nav Transition Promises section. For alerts, this means it's best to wait for the alert to finish its transition out before starting a new transition on the same nav controller.

In the example below, after the alert button has been clicked, its handler waits on async operation to complete, then it uses pop to navigate back a page in the same stack. The potential problem is that the async operation may have been completed before the alert has even finished its transition out. In this case, it's best to ensure the alert has finished its transition out first, then start the next transition.

const alert = this.alertCtrl.create({
  title: 'Hello',
  buttons: [{
    text: 'Ok',
    handler: () => {
      // user has clicked the alert button
      // begin the alert's dismiss transition
      const navTransition = alert.dismiss();

      // start some async method
      someAsyncOperation().then(() => {
        // once the async operation has completed
        // then run the next nav transition after the
        // first transition has finished animating out

        navTransition.then(() => {
          this.nav.pop();
        });
      });
      return false;
    }
  }]
});

alert.present();

It's important to note that the handler returns false. A feature of button handlers is that they automatically dismiss the alert when their button was clicked, however, we'll need more control regarding the transition. Because the handler returns false, then the alert does not automatically dismiss itself. Instead, you now have complete control of when the alert has finished transitioning, and the ability to wait for the alert to finish transitioning out before starting a new transition.

Sass Variables

All iOS Material Design Windows Platform

Property	Default	Description
`$alert-min-width`	`250px`	Minimum width of the alert
`$alert-max-height`	`90%`	Maximum height of the alert
`$alert-button-line-height`	`20px`	Line height of the alert button
`$alert-button-font-size`	`14px`	Font size of the alert button
`$alert-input-placeholder-color`	`#999`	Color of the alert input placeholder

Property	Default	Description
`$alert-ios-max-width`	`270px`	Max width of the alert
`$alert-ios-border-radius`	`13px`	Border radius of the alert
`$alert-ios-background`	`#f8f8f8`	Background color of the alert
`$alert-ios-box-shadow`	`none`	Box shadow of the alert
`$alert-ios-head-padding-top`	`12px`	Padding top of the alert head
`$alert-ios-head-padding-end`	`16px`	Padding end of the alert head
`$alert-ios-head-padding-bottom`	`7px`	Padding bottom of the alert head
`$alert-ios-head-padding-start`	`$alert-ios-head-padding-end`	Padding start of the alert head
`$alert-ios-head-text-align`	`center`	Text align of the alert head
`$alert-ios-title-margin-top`	`8px`	Margin top of the alert title
`$alert-ios-title-font-size`	`17px`	Font size of the alert title
`$alert-ios-title-font-weight`	`600`	Font weight of the alert title
`$alert-ios-sub-title-font-size`	`14px`	Font size of the alert sub title
`$alert-ios-sub-title-text-color`	`#666`	Text color of the alert sub title
`$alert-ios-message-padding-top`	`0`	Padding top of the alert message
`$alert-ios-message-padding-end`	`16px`	Padding end of the alert message
`$alert-ios-message-padding-bottom`	`21px`	Padding bottom of the alert message
`$alert-ios-message-padding-start`	`$alert-ios-message-padding-end`	Padding start of the alert message
`$alert-ios-message-font-size`	`13px`	Font size of the alert message
`$alert-ios-message-text-align`	`center`	Text align of the alert message
`$alert-ios-message-text-color`	`inherit`	Text color of the alert message
`$alert-ios-message-empty-padding-top`	`0`	Padding top of the alert empty message
`$alert-ios-message-empty-padding-end`	`0`	Padding end of the alert empty message
`$alert-ios-message-empty-padding-bottom`	`12px`	Padding bottom of the alert empty message
`$alert-ios-message-empty-padding-start`	`0`	Padding start of the alert empty message
`$alert-ios-content-max-height`	`240px`	Maximum height of the alert content
`$alert-ios-input-margin-top`	`10px`	Margin top of the alert input
`$alert-ios-input-padding-top`	`6px`	Padding top on the alert input
`$alert-ios-input-padding-end`	`$alert-ios-input-padding-top`	Padding end on the alert input
`$alert-ios-input-padding-bottom`	`$alert-ios-input-padding-top`	Padding bottom on the alert input
`$alert-ios-input-padding-start`	`$alert-ios-input-padding-end`	Padding start on the alert input
`$alert-ios-input-border-color`	`#ccc`	Border color of the alert input
`$alert-ios-input-border`	`$hairlines-width solid $alert-ios-input-border-color`	Border of the alert input
`$alert-ios-input-border-radius`	`4px`	Border radius of the alert input
`$alert-ios-input-background-color`	`#fff`	Background color of the alert input
`$alert-ios-button-group-flex-wrap`	`wrap`	Flex wrap of the alert button group
`$alert-ios-button-flex`	`1 1 auto`	Flex of the alert button
`$alert-ios-button-margin`	`0`	Margin of the alert button
`$alert-ios-button-min-width`	`50%`	Min width of the alert button
`$alert-ios-button-min-height`	`44px`	Minimum height of the alert button
`$alert-ios-button-font-size`	`17px`	Font size of the alert button
`$alert-ios-button-text-color`	`color($colors-ios, primary)`	Color of the text in the alert button
`$alert-ios-button-background-color`	`transparent`	Background color of the alert button
`$alert-ios-button-background-color-activated`	`#e9e9e9`	Background color of the alert activated button
`$alert-ios-button-border-width`	`$hairlines-width`	Border width of the alert button
`$alert-ios-button-border-style`	`solid`	Border style of the alert button
`$alert-ios-button-border-color`	`#dbdbdf`	Border color of the alert button
`$alert-ios-button-border-radius`	`0`	Border radius of the alert button
`$alert-ios-button-main-font-weight`	`bold`	Font weight of the main text on the alert button
`$alert-ios-list-border-top`	`$alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color`	Border top of the alert list
`$alert-ios-radio-label-padding-top`	`13px`	Padding top on the label for the radio alert
`$alert-ios-radio-label-padding-end`	`$alert-ios-radio-label-padding-top`	Padding end on the label for the radio alert
`$alert-ios-radio-label-padding-bottom`	`$alert-ios-radio-label-padding-top`	Padding bottom on the label for the radio alert
`$alert-ios-radio-label-padding-start`	`$alert-ios-radio-label-padding-end`	Padding start on the label for the radio alert
`$alert-ios-radio-label-text-color`	`initial`	Text color of the label for the radio alert
`$alert-ios-radio-label-text-color-checked`	`$alert-ios-button-text-color`	Text color of the label for the checked radio alert
`$alert-ios-radio-min-width`	`30px`	Min width of the radio alert
`$alert-ios-radio-icon-top`	`-7px`	Top of the icon in the radio alert
`$alert-ios-radio-icon-start`	`$alert-ios-radio-icon-left`	Start of the icon in the radio alert
`$alert-ios-radio-icon-width`	`6px`	Width of the icon in the radio alert
`$alert-ios-radio-icon-height`	`12px`	Height of the icon in the radio alert
`$alert-ios-radio-icon-border-width`	`2px`	Border width of the icon in the radio alert
`$alert-ios-radio-icon-border-style`	`solid`	Border style of the icon in the radio alert
`$alert-ios-radio-icon-border-color`	`$alert-ios-button-text-color`	Border color of the icon in the radio alert
`$alert-ios-radio-icon-transform`	`rotate(45deg)`	Transform of the icon in the radio alert
`$alert-ios-checkbox-label-padding-top`	`13px`	Padding top of the label for the checkbox in the alert
`$alert-ios-checkbox-label-padding-end`	`$alert-ios-checkbox-label-padding-top`	Padding end of the label for the checkbox in the alert
`$alert-ios-checkbox-label-padding-bottom`	`$alert-ios-checkbox-label-padding-top`	Padding bottom of the label for the checkbox in the alert
`$alert-ios-checkbox-label-padding-start`	`$alert-ios-checkbox-label-padding-end`	Padding start of the label for the checkbox in the alert
`$alert-ios-checkbox-label-text-color`	`initial`	Text color of the label for the checkbox in the alert
`$alert-ios-checkbox-label-text-color-checked`	`initial`	Text color of the label for the checked checkbox in the alert
`$alert-ios-checkbox-margin-top`	`10px`	Margin top of the checkbox in the alert
`$alert-ios-checkbox-margin-end`	`6px`	Margin end of the checkbox in the alert
`$alert-ios-checkbox-margin-bottom`	`10px`	Margin bottom of the checkbox in the alert
`$alert-ios-checkbox-margin-start`	`16px`	Margin start of the checkbox in the alert
`$alert-ios-checkbox-size`	`21px`	Size of the checkbox in the alert
`$alert-ios-checkbox-border-width`	`$hairlines-width`	Border width of the checkbox in the alert
`$alert-ios-checkbox-border-style`	`solid`	Border style of the checkbox in the alert
`$alert-ios-checkbox-border-radius`	`50%`	Border radius of the checkbox in the alert
`$alert-ios-checkbox-border-color-off`	`$list-ios-border-color`	Border color of the checkbox in the alert when off
`$alert-ios-checkbox-border-color-on`	`color($colors-ios, primary)`	Border color of the checkbox in the alert when on
`$alert-ios-checkbox-background-color-off`	`$list-ios-background-color`	Background color of the checkbox in the alert when off
`$alert-ios-checkbox-background-color-on`	`color($colors-ios, primary)`	Background color of the checkbox in the alert when on
`$alert-ios-checkbox-icon-top`	`4px`	Top of the icon in the checkbox alert
`$alert-ios-checkbox-icon-start`	`$alert-ios-checkbox-icon-left`	Start of the icon in the checkbox alert
`$alert-ios-checkbox-icon-width`	`4px`	Width of the icon in the checkbox alert
`$alert-ios-checkbox-icon-height`	`9px`	Height of the icon in the checkbox alert
`$alert-ios-checkbox-icon-border-width`	`$alert-ios-checkbox-border-width`	Border width of the icon in the checkbox alert
`$alert-ios-checkbox-icon-border-style`	`$alert-ios-checkbox-border-style`	Border style of the icon in the checkbox alert
`$alert-ios-checkbox-icon-border-color`	`$background-ios-color`	Border color of the icon in the checkbox alert
`$alert-ios-checkbox-icon-transform`	`rotate(45deg)`	Transform of the icon in the checkbox alert

Property	Default	Description
`$alert-md-max-width`	`280px`	Max width of the alert
`$alert-md-border-radius`	`2px`	Border radius of the alert
`$alert-md-background-color`	`#fafafa`	Background color of the alert
`$alert-md-box-shadow-color`	`rgba(0, 0, 0, .4)`	Box shadow color of the alert
`$alert-md-box-shadow`	`0 16px 20px $alert-md-box-shadow-color`	Box shadow of the alert
`$alert-md-head-padding-top`	`24px`	Padding top of the alert head
`$alert-md-head-padding-end`	`24px`	Padding end of the alert head
`$alert-md-head-padding-bottom`	`20px`	Padding bottom of the alert head
`$alert-md-head-padding-start`	`24px`	Padding start of the alert head
`$alert-md-head-text-align`	`start`	Text align of the alert head
`$alert-md-title-font-size`	`22px`	Font size of the alert title
`$alert-md-sub-title-font-size`	`16px`	Font size of the alert sub title
`$alert-md-message-padding-top`	`0`	Padding top of the alert message
`$alert-md-message-padding-end`	`24px`	Padding end of the alert message
`$alert-md-message-padding-bottom`	`24px`	Padding bottom of the alert message
`$alert-md-message-padding-start`	`24px`	Padding start of the alert message
`$alert-md-message-font-size`	`15px`	Font size of the alert message
`$alert-md-message-text-color`	`rgba(0, 0, 0, .5)`	Text color of the alert message
`$alert-md-message-empty-padding-top`	`0`	Padding top of the alert empty message
`$alert-md-message-empty-padding-end`	`$alert-md-message-empty-padding-top`	Padding end of the alert empty message
`$alert-md-message-empty-padding-bottom`	`$alert-md-message-empty-padding-top`	Padding bottom of the alert empty message
`$alert-md-message-empty-padding-start`	`$alert-md-message-empty-padding-end`	Padding start of the alert empty message
`$alert-md-content-max-height`	`240px`	Maximum height of the alert content
`$alert-md-input-border-width`	`1px`	Border width of the alert input
`$alert-md-input-border-style`	`solid`	Border style of the alert input
`$alert-md-input-border-color`	`#dedede`	Border color of the alert input
`$alert-md-input-text-color`	`#000`	Text color of the alert input
`$alert-md-input-border-width-focused`	`2px`	Border width of the alert input when focused
`$alert-md-input-border-style-focused`	`$alert-md-input-border-style`	Border style of the alert input when focused
`$alert-md-input-border-color-focused`	`color($colors-md, primary)`	Border color of the alert input when focused
`$alert-md-input-margin-top`	`5px`	Margin top of the alert input
`$alert-md-input-margin-end`	`$alert-md-input-margin-right`	Margin end of the alert input
`$alert-md-input-margin-bottom`	`5px`	Margin bottom of the alert input
`$alert-md-input-margin-start`	`$alert-md-input-margin-left`	Margin start of the alert input
`$alert-md-button-group-flex-wrap`	`wrap-reverse`	Flex wrap of the alert button group
`$alert-md-button-group-padding-top`	`8px`	Padding top of the alert button group
`$alert-md-button-group-padding-end`	`8px`	Padding end of the alert button group
`$alert-md-button-group-padding-bottom`	`8px`	Padding bottom of the alert button group
`$alert-md-button-group-padding-start`	`24px`	Padding start of the alert button group
`$alert-md-button-group-justify-content`	`flex-end`	Justify content of the alert button group
`$alert-md-button-padding-top`	`10px`	Padding top of the alert button
`$alert-md-button-padding-end`	`$alert-md-button-padding-top`	Padding end of the alert button
`$alert-md-button-padding-bottom`	`$alert-md-button-padding-top`	Padding bottom of the alert button
`$alert-md-button-padding-start`	`$alert-md-button-padding-end`	Padding start of the alert button
`$alert-md-button-margin-top`	`0`	Margin top of the alert button
`$alert-md-button-margin-end`	`8px`	Margin end of the alert button
`$alert-md-button-margin-bottom`	`0`	Margin bottom of the alert button
`$alert-md-button-margin-start`	`0`	Margin start of the alert button
`$alert-md-button-font-weight`	`500`	Font weight of the alert button
`$alert-md-button-text-color`	`color($colors-md, primary)`	Text color of the alert button
`$alert-md-button-background-color`	`transparent`	Background color of the alert button
`$alert-md-button-background-color-activated`	`rgba(158, 158, 158, .2)`	Background color of the alert activated button
`$alert-md-button-border-radius`	`2px`	Border radius of the alert button
`$alert-md-button-text-transform`	`uppercase`	Text transform of the alert button
`$alert-md-button-text-align`	`end`	Text align of the alert button
`$alert-md-list-border-top`	`1px solid $alert-md-input-border-color`	Border top of the alert list
`$alert-md-list-border-bottom`	`$alert-md-list-border-top`	Border bottom of the alert list
`$alert-md-radio-label-padding-top`	`13px`	Padding top on the label for the radio alert
`$alert-md-radio-label-padding-end`	`26px`	Padding end on the label for the radio alert
`$alert-md-radio-label-padding-bottom`	`$alert-md-radio-label-padding-top`	Padding bottom on the label for the radio alert
`$alert-md-radio-label-padding-start`	`$alert-md-radio-label-padding-end`	Padding start on the label for the radio alert
`$alert-md-radio-label-text-color`	`initial`	Text color of the label for the radio alert
`$alert-md-radio-label-text-color-checked`	`$alert-md-button-text-color`	Text color of the label for the checked radio alert
`$alert-md-radio-top`	`0`	Top of the alert radio
`$alert-md-radio-left`	`13px`	Left of the alert radio
`$alert-md-radio-width`	`16px`	Width of the alert radio
`$alert-md-radio-height`	`16px`	Height of the alert radio
`$alert-md-radio-border-width`	`2px`	Border width of the alert radio
`$alert-md-radio-border-style`	`solid`	Border style of the alert radio
`$alert-md-radio-border-radius`	`50%`	Border radius of the alert radio
`$alert-md-radio-border-color-off`	`darken($list-md-border-color, 40%)`	Border color of the alert radio when off
`$alert-md-radio-border-color-on`	`$alert-md-button-text-color`	Border color of the alert radio when on
`$alert-md-radio-icon-top`	`2px`	Top of the icon in the alert radio
`$alert-md-radio-icon-start`	`$alert-md-radio-icon-left`	Start of the icon in the radio alert
`$alert-md-radio-icon-width`	`8px`	Width of the icon in the alert radio
`$alert-md-radio-icon-height`	`8px`	Height of the icon in the alert radio
`$alert-md-radio-icon-border-radius`	`$alert-md-radio-border-radius`	Border radius of the icon in the alert radio
`$alert-md-radio-icon-transform-off`	`scale3d(0, 0, 0)`	Transform of the icon in the alert radio when off
`$alert-md-radio-icon-transform-on`	`scale3d(1, 1, 1)`	Transform of the icon in the alert radio when on
`$alert-md-radio-icon-transition`	`transform 280ms cubic-bezier(.4, 0, .2, 1)`	Transition of the icon in the alert radio
`$alert-md-checkbox-label-padding-top`	`13px`	Padding top of the label for the checkbox in the alert
`$alert-md-checkbox-label-padding-end`	`26px`	Padding end of the label for the checkbox in the alert
`$alert-md-checkbox-label-padding-bottom`	`$alert-md-checkbox-label-padding-top`	Padding bottom of the label for the checkbox in the alert
`$alert-md-checkbox-label-padding-start`	`$alert-md-checkbox-label-padding-end`	Padding start of the label for the checkbox in the alert
`$alert-md-checkbox-label-text-color`	`initial`	Text color of the label for the checkbox in the alert
`$alert-md-checkbox-label-text-color-checked`	`initial`	Text color of the label for the checked checkbox in the alert
`$alert-md-checkbox-top`	`0`	Top of the checkbox in the alert
`$alert-md-checkbox-left`	`13px`	Left of the checkbox in the alert
`$alert-md-checkbox-width`	`16px`	Width of the checkbox in the alert
`$alert-md-checkbox-height`	`16px`	Height of the checkbox in the alert
`$alert-md-checkbox-border-width`	`2px`	Border width of the checkbox in the alert
`$alert-md-checkbox-border-style`	`solid`	Border style of the checkbox in the alert
`$alert-md-checkbox-border-radius`	`2px`	Border radius of the checkbox in the alert
`$alert-md-checkbox-border-color-off`	`darken($list-md-border-color, 40%)`	Border color of the checkbox in the alert when off
`$alert-md-checkbox-border-color-on`	`$alert-md-button-text-color`	Border color of the checkbox in the alert when on
`$alert-md-checkbox-icon-top`	`0`	Top of the icon in the checkbox alert
`$alert-md-checkbox-icon-start`	`$alert-md-checkbox-icon-left`	Start of the icon in the checkbox alert
`$alert-md-checkbox-icon-width`	`6px`	Width of the icon in the checkbox alert
`$alert-md-checkbox-icon-height`	`10px`	Height of the icon in the checkbox alert
`$alert-md-checkbox-icon-border-width`	`2px`	Border width of the icon in the checkbox alert
`$alert-md-checkbox-icon-border-style`	`solid`	Border style of the icon in the checkbox alert
`$alert-md-checkbox-icon-border-color`	`color-contrast($colors-md, $alert-md-checkbox-border-color-on)`	Border color of the icon in the checkbox alert
`$alert-md-checkbox-icon-transform`	`rotate(45deg)`	Transform of the icon in the checkbox alert

Property	Default	Description
`$alert-wp-backdrop-background`	`#fff`	Background of the alert backdrop
`$alert-wp-width`	`100%`	Width of the alert
`$alert-wp-max-width`	`520px`	Max width of the alert
`$alert-wp-border-width`	`1px`	Border width of the alert
`$alert-wp-border-style`	`solid`	Border style of the alert
`$alert-wp-border-color`	`color($colors-wp, primary)`	Border color of the alert
`$alert-wp-border-radius`	`0`	Border radius of the alert
`$alert-wp-background`	`#e6e6e6`	Background color of the alert
`$alert-wp-head-padding-top`	`20px`	Padding top of the alert head
`$alert-wp-head-padding-end`	`22px`	Padding end of the alert head
`$alert-wp-head-padding-bottom`	`5px`	Padding bottom of the alert head
`$alert-wp-head-padding-start`	`22px`	Padding start of the alert head
`$alert-wp-head-text-align`	`start`	Text align of the alert head
`$alert-wp-title-font-size`	`20px`	Font size of the alert title
`$alert-wp-title-font-weight`	`400`	Font weight of the alert title
`$alert-wp-sub-title-font-size`	`16px`	Font size of the alert sub title
`$alert-wp-message-padding-top`	`0`	Padding top of the alert message
`$alert-wp-message-padding-end`	`22px`	Padding end of the alert message
`$alert-wp-message-padding-bottom`	`8px`	Padding bottom of the alert message
`$alert-wp-message-padding-start`	`22px`	Padding start of the alert message
`$alert-wp-message-empty-padding-top`	`0`	Padding top of the alert empty message
`$alert-wp-message-empty-padding-end`	`$alert-wp-message-empty-padding-top`	Padding end of the alert empty message
`$alert-wp-message-empty-padding-bottom`	`$alert-wp-message-empty-padding-top`	Padding bottom of the alert empty message
`$alert-wp-message-empty-padding-start`	`$alert-wp-message-empty-padding-end`	Padding start of the alert empty message
`$alert-wp-message-text-color`	`#000`	Text color of the alert message
`$alert-wp-message-font-size`	`13px`	Font size of the alert message
`$alert-wp-content-max-height`	`240px`	Maximum height of the alert content
`$alert-wp-input-margin-top`	`5px`	Margin top of the alert input
`$alert-wp-input-margin-end`	`0`	Margin end of the alert input
`$alert-wp-input-margin-bottom`	`5px`	Margin bottom of the alert input
`$alert-wp-input-margin-start`	`0`	Margin start of the alert input
`$alert-wp-input-padding-top`	`0`	Padding top on the alert input
`$alert-wp-input-padding-end`	`8px`	Padding end on the alert input
`$alert-wp-input-padding-bottom`	`$alert-wp-input-padding-top`	Padding bottom on the alert input
`$alert-wp-input-padding-start`	`$alert-wp-input-padding-end`	Padding start on the alert input
`$alert-wp-input-border-width`	`2px`	Border width of the alert input
`$alert-wp-input-border-style`	`$alert-wp-border-style`	Border style of the alert input
`$alert-wp-input-border-color`	`$input-wp-border-color`	Border color of the alert input
`$alert-wp-input-border-color-focused`	`color($colors-wp, primary)`	Border color of the alert input when focused
`$alert-wp-input-line-height`	`3rem`	Line height of the alert input
`$alert-wp-input-text-color`	`#000`	Color of the text in the alert input
`$alert-wp-button-padding-top`	`5px`	Padding top of the alert button
`$alert-wp-button-padding-end`	`$alert-wp-button-padding-top`	Padding end of the alert button
`$alert-wp-button-padding-bottom`	`$alert-wp-button-padding-top`	Padding bottom of the alert button
`$alert-wp-button-padding-start`	`$alert-wp-button-padding-end`	Padding start of the alert button
`$alert-wp-button-width`	`49.5%`	Width of the alert button
`$alert-wp-button-border-radius`	`0`	Border radius of the alert button
`$alert-wp-button-font-weight`	`400`	Font weight of the alert button
`$alert-wp-button-text-color`	`#000`	Color of the text in the alert button
`$alert-wp-button-background`	`#b8b8b8`	Background color of the alert button
`$alert-wp-button-background-activated`	`color-shade($alert-wp-button-background)`	Background color of the activated alert button
`$alert-wp-button-margin-end`	`$alert-wp-button-margin-right`	Margin end of the alert button
`$alert-wp-button-group-padding-top`	`20px`	Padding top of the alert button group
`$alert-wp-button-group-padding-end`	`22px`	Padding end of the alert button group
`$alert-wp-button-group-padding-bottom`	`20px`	Padding bottom of the alert button group
`$alert-wp-button-group-padding-start`	`22px`	Padding start of the alert button group
`$alert-wp-button-group-justify-content`	`flex-end`	Justify content of the alert button group
`$alert-wp-button-group-flex-wrap`	`wrap-reverse`	Flex wrap of the alert button group
`$alert-wp-button-group-vertical-width`	`100%`	Vertical width of the vertical alert button group
`$alert-wp-button-group-vertical-margin-top`	`5px`	Margin top of the vertical alert button group
`$alert-wp-radio-background`	`color($colors-wp, primary)`	Background color of the radio alert
`$alert-wp-radio-border-color`	`$input-wp-border-color`	Border color of the radio alert
`$alert-wp-radio-label-padding-top`	`13px`	Padding top of the label for the radio alert
`$alert-wp-radio-label-padding-end`	`26px`	Padding end of the label for the radio alert
`$alert-wp-radio-label-padding-bottom`	`$alert-wp-radio-label-padding-top`	Padding bottom of the label for the radio alert
`$alert-wp-radio-label-padding-start`	`$alert-wp-radio-label-padding-end`	Padding start of the label for the radio alert
`$alert-wp-radio-label-text-color`	`initial`	Text color of the label for the radio alert
`$alert-wp-radio-label-text-color-checked`	`$alert-wp-button-text-color`	Text color of the label for the checked radio alert
`$alert-wp-radio-top`	`0`	Top of the radio alert
`$alert-wp-radio-left`	`13px`	Left of the radio alert
`$alert-wp-radio-width`	`16px`	Width of the radio alert
`$alert-wp-radio-height`	`16px`	Height of the radio alert
`$alert-wp-radio-border-width`	`2px`	Border width of the radio alert
`$alert-wp-radio-border-style`	`solid`	Border style of the radio alert
`$alert-wp-radio-border-radius`	`50%`	Border radius of the radio alert
`$alert-wp-radio-border-color`	`$input-wp-border-color`	Border color of the radio alert
`$alert-wp-radio-icon-top`	`2px`	Top of the icon in the radio alert
`$alert-wp-radio-icon-start`	`$alert-wp-radio-icon-left`	Start of the icon in the radio alert
`$alert-wp-radio-icon-width`	`8px`	Width of the icon in the radio alert
`$alert-wp-radio-icon-height`	`8px`	Height of the icon in the radio alert
`$alert-wp-radio-icon-border-radius`	`$alert-wp-radio-border-radius`	Border radius of the icon in the radio alert
`$alert-wp-checkbox-label-padding-top`	`13px`	Padding top of the label for the checkbox in the alert
`$alert-wp-checkbox-label-padding-end`	`26px`	Padding end of the label for the checkbox in the alert
`$alert-wp-checkbox-label-padding-bottom`	`$alert-wp-checkbox-label-padding-top`	Padding bottom of the label for the checkbox in the alert
`$alert-wp-checkbox-label-padding-start`	`$alert-wp-checkbox-label-padding-end`	Padding start of the label for the checkbox in the alert
`$alert-wp-checkbox-label-text-color`	`initial`	Text color of the label for the checkbox in the alert
`$alert-wp-checkbox-label-text-color-checked`	`initial`	Text color of the label for the checked checkbox in the alert
`$alert-wp-checkbox-top`	`0`	Top of the checkbox in the alert
`$alert-wp-checkbox-left`	`13px`	Left of the checkbox in the alert
`$alert-wp-checkbox-width`	`16px`	Width of the checkbox in the alert
`$alert-wp-checkbox-height`	`16px`	Height of the checkbox in the alert
`$alert-wp-checkbox-border-width`	`2px`	Border width of the checkbox in the alert
`$alert-wp-checkbox-border-style`	`solid`	Border style of the checkbox in the alert
`$alert-wp-checkbox-border-radius`	`0`	Border radius of the checkbox in the alert
`$alert-wp-checkbox-border-color`	`$input-wp-border-color`	Border color of the checkbox in the alert
`$alert-wp-checkbox-background-off`	`transparent`	Background color of the checkbox in the alert when off
`$alert-wp-checkbox-background-on`	`color($colors-wp, primary)`	Background color of the checkbox in the alert when on
`$alert-wp-checkbox-icon-top`	`-2px`	Top of the icon in the checkbox alert
`$alert-wp-checkbox-icon-start`	`$alert-wp-checkbox-icon-left`	Start of the icon in the checkbox alert
`$alert-wp-checkbox-icon-width`	`6px`	Width of the icon in the checkbox alert
`$alert-wp-checkbox-icon-height`	`12px`	Height of the icon in the checkbox alert
`$alert-wp-checkbox-icon-border-width`	`1px`	Border width of the icon in the checkbox alert
`$alert-wp-checkbox-icon-border-style`	`solid`	Border style of the icon in the checkbox alert
`$alert-wp-checkbox-icon-border-color`	`color-contrast($colors-wp, $alert-wp-checkbox-background-on)`	Border color of the icon in the checkbox alert
`$alert-wp-checkbox-icon-transform`	`rotate(45deg)`	Transform of the icon in the checkbox alert