Alert

Alert components are Display Fields to display contextual feedback messages for user actions or system events.

alert.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "",
        "kind": "display",
        "widget": "alert",
        "props": {
          "text": "Some fields need your attention"
        }
      }
    ]
  }
}

Props

Use this props to customize your Alert component.

prop	type	value
text	string	MANDATORY The message to display
level	string	Defines the type of alert to display (success, warning, error, info), if no level is set, default is the level

Level

Use the property level to determines the tone and appearance of the alert.

alert.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "",
        "kind": "display",
        "widget": "alert",
        "props": {
          "text": "Default level",
          "level": "default"
        }
      },
      {
        "uid": "",
        "kind": "display",
        "widget": "alert",
        "props": {
          "text": "Info level",
          "level": "info"
        }
      },
      {
        "uid": "",
        "kind": "display",
        "widget": "alert",
        "props": {
          "text": "Success level",
          "level": "success"
        }
      },
      {
        "uid": "",
        "kind": "display",
        "widget": "alert",
        "props": {
          "text": "Warning level",
          "level": "warning"
        }
      },
      {
        "uid": "",
        "kind": "display",
        "widget": "alert",
        "props": {
          "text": "Error level",
          "level": "error"
        }
      }
    ]
  }
}

Styling

Textinputs can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
--gui-color-default--light	Background color for default level
--gui-color-default	Border color for default level
--gui-color-default--dark	Font color for default level
--gui-color-info--light	Background color for info level
--gui-color-info	Border color for info level
--gui-color-info--dark	Font color for info level
--gui-color-success--light	Background color for success level
--gui-color-success	Border color for success level
--gui-color-success--dark	Font color for success level
--gui-color-warning--light	Background color for warning level
--gui-color-warning	Border color for warning level
--gui-color-warning--dark	Font color for warning level
--gui-color-error--light	Background color for error level
--gui-color-error	Border color for error level
--gui-color-error--dark	Font color for error level

Anatomy

This is the anatomy of the Alert Component in case you want to use your CSS styles.

alert.html

<gui-alert>
  <div class="gui-field" id="fieldUid">
    <div class="gui-alert-notification gui-alert-notification--default">Alert text</div>
  </div>
</gui-alert>