# Alert

Contextual status messages with basic, success, warning and error variants.

## Installation

Download: /api/catalog/alert/download

Ignition Perspective 8.3. In a development project, choose Designer > File > Import and select the ZIP. Preserve the view and style-class paths. Review resource conflicts before replacing anything.

Append stylesheet-snippet.css to Perspective Styles > stylesheet.css (enable Advanced Stylesheet). Preserve existing CSS. This supporting file is not imported automatically.

Add an Embedded View (ia.display.view), set props.path to Viewcraft/Components/UI/Alert/Alert, and configure props.params using the contract below. Connect your own data in the host view. The package does not include live tags, page configuration or Gateway settings.

## Parameters

Types are inferred from saved defaults; directions come from native propConfig. These are not full schemas or validated ranges.

| Parameter | Type | Direction | Default |

| --- | --- | --- | --- |

| variant | string | input | "default" |

| title | string | input | "Alert!" |

| description | string | input | "Este es un aviso con título y descripción." |

| showIcon | boolean | input | true |

## Embedded View usage

```json

{
  "type": "ia.display.view",
  "props": {
    "path": "Viewcraft/Components/UI/Alert/Alert",
    "params": {
      "variant": "default",
      "title": "Alert!",
      "description": "Este es un aviso con título y descripción.",
      "showIcon": true
    },
    "useDefaultViewWidth": false,
    "useDefaultViewHeight": false
  }
}

```

## Verification

Source and archive hashes are checked. Designer import acceptance has not been completed for this archive; test in your development project before production.

## Files

### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Alert/Alert/view.json

```json

{
  "custom": {},
  "params": {
    "variant": "default",
    "title": "Alert!",
    "description": "Este es un aviso con título y descripción.",
    "showIcon": true
  },
  "propConfig": {
    "params.variant": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.title": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.description": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.showIcon": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "width": 480,
      "height": 72
    }
  },
  "root": {
    "type": "ia.container.flex",
    "version": 0,
    "meta": {
      "name": "Alert"
    },
    "props": {
      "direction": "row",
      "wrap": "nowrap",
      "alignItems": "flex-start",
      "justify": "flex-start",
      "style": {
        "classes": "vc/alert vc/alert-default vc-r-alert",
        "gap": "12px",
        "width": "100%",
        "minWidth": 0,
        "boxSizing": "border-box"
      }
    },
    "propConfig": {
      "props.style.classes": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "\"vc/alert\" + if(lower(coalesce({view.params.variant}, \"default\")) = \"success\", \" vc/alert-success\", if(lower(coalesce({view.params.variant}, \"default\")) = \"warning\", \" vc/alert-warning\", if(lower(coalesce({view.params.variant}, \"default\")) = \"destructive\" || lower(coalesce({view.params.variant}, \"default\")) = \"error\", \" vc/alert-destructive\", if(lower(coalesce({view.params.variant}, \"default\")) = \"info\", \" vc/alert-info\", \" vc/alert-default\")))) + \" vc-r-alert\""
          }
        }
      }
    },
    "children": [
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "StatusIcon"
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "18px"
        },
        "props": {
          "text": "",
          "style": {
            "classes": "vc-r-alert-icon",
            "backgroundImage": "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYTFhMWFhIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOSIvPjxwYXRoIGQ9Ik0xMiAxMXY2bTAtMTBoLjAxIi8+PC9zdmc+)"
          }
        },
        "propConfig": {
          "props.style.backgroundImage": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if({view.params.variant} = \"success\", \"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNGFkZTgwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOSIvPjxwYXRoIGQ9Im04IDEyIDMgMyA1LTYiLz48L3N2Zz4=)\", if({view.params.variant} = \"warning\", \"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmFjYzE1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0ibTEyIDMgMTAgMThIMkwxMiAzWm0wIDZ2NG0wIDRoLjAxIi8+PC9zdmc+)\", if({view.params.variant} = \"destructive\" || {view.params.variant} = \"error\", \"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjg3MTcxIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOSIvPjxwYXRoIGQ9Im05IDkgNiA2bTAtNi02IDYiLz48L3N2Zz4=)\", \"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYTFhMWFhIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOSIvPjxwYXRoIGQ9Ik0xMiAxMXY2bTAtMTBoLjAxIi8+PC9zdmc+)\")))"
              }
            }
          },
          "props.style.classes": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "if({view.params.showIcon}, \"vc-r-alert-icon\", \"vc-r-hidden\")"
              }
            }
          }
        }
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "Body"
        },
        "position": {
          "grow": 1,
          "shrink": 1,
          "basis": "0px"
        },
        "props": {
          "direction": "column",
          "alignItems": "stretch",
          "justify": "flex-start",
          "style": {
            "classes": "vc/alert-body",
            "gap": "2px",
            "minWidth": 0
          }
        },
        "children": [
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "Title"
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "auto"
            },
            "props": {
              "text": "Alert!",
              "align": "left",
              "style": {
                "classes": "vc/alert-title",
                "padding": "0px",
                "margin": "0px"
              }
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.title"
                  }
                }
              }
            }
          },
          {
            "type": "ia.display.label",
            "version": 0,
            "meta": {
              "name": "Description"
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "auto"
            },
            "props": {
              "text": "Este es un aviso con título y descripción.",
              "align": "left",
              "style": {
                "classes": "vc/alert-description",
                "padding": "0px",
                "margin": "0px"
              }
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "type": "property",
                  "config": {
                    "path": "view.params.description"
                  }
                }
              },
              "meta.visible": {
                "binding": {
                  "type": "expr",
                  "config": {
                    "expression": "len(coalesce({view.params.description}, \"\")) > 0"
                  }
                }
              }
            }
          }
        ]
      }
    ]
  }
}


```

### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Alert/Alert/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "view.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/alert/style.json

```json

{
    "base": {
        "style": {},
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/alert/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/alert-default/style.json

```json

{
    "base": {
        "style": {},
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/alert-default/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/alert-success/style.json

```json

{
    "base": {
        "style": {},
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/alert-success/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/alert-warning/style.json

```json

{
    "base": {
        "style": {},
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/alert-warning/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/alert-destructive/style.json

```json

{
    "base": {
        "style": {},
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/alert-destructive/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/alert-info/style.json

```json

{
    "base": {
        "style": {},
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/alert-info/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/alert-body/style.json

```json

{
    "base": {
        "style": {},
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/alert-body/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/alert-title/style.json

```json

{
    "base": {
        "style": {},
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/alert-title/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/alert-description/style.json

```json

{
    "base": {
        "style": {},
        "mediaQueries": []
    },
    "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/alert-description/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### stylesheet-snippet.css

```css



[class~="psc-vc/alert"], .psc-vc\/alert {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  background-color: var(--vc-panel, #171717) !important;
  border: 1px solid #27272a !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: var(--vc-foreground, #fafafa) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18) !important;
  overflow: hidden !important;
}
[class~="psc-vc/alert-default"], .psc-vc\/alert-default {
  border-color: var(--vc-border, #3f3f46) !important;
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18) !important;
}

[class~="psc-vc/alert-success"], .psc-vc\/alert-success {
  border-color: #4ade80 !important;
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18) !important;
}

[class~="psc-vc/alert-warning"], .psc-vc\/alert-warning {
  border-color: #eab308 !important;
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18) !important;
}

[class~="psc-vc/alert-destructive"], .psc-vc\/alert-destructive {
  border-color: var(--vc-destructive, #f87171) !important;
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18) !important;
}

[class~="psc-vc/alert-info"], .psc-vc\/alert-info {
  border-color: #60a5fa !important;
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18) !important;
}

[class~="psc-vc/alert-default"] [class~="psc-vc/alert-icon"], .psc-vc\/alert-default .psc-vc\/alert-icon, [class~="psc-vc/alert-default"] [class~="psc-vc/alert-icon"] svg, .psc-vc\/alert-default .psc-vc\/alert-icon svg {
  color: var(--vc-muted-fg, #a1a1aa) !important;
  fill: #a1a1aa !important;
}

[class~="psc-vc/alert-success"] [class~="psc-vc/alert-icon"], .psc-vc\/alert-success .psc-vc\/alert-icon, [class~="psc-vc/alert-success"] [class~="psc-vc/alert-icon"] svg, .psc-vc\/alert-success .psc-vc\/alert-icon svg {
  color: var(--vc-success, #4ade80) !important;
  fill: #4ade80 !important;
}

[class~="psc-vc/alert-warning"] [class~="psc-vc/alert-icon"], .psc-vc\/alert-warning .psc-vc\/alert-icon, [class~="psc-vc/alert-warning"] [class~="psc-vc/alert-icon"] svg, .psc-vc\/alert-warning .psc-vc\/alert-icon svg {
  color: #eab308 !important;
  fill: #eab308 !important;
}

[class~="psc-vc/alert-destructive"] [class~="psc-vc/alert-icon"], .psc-vc\/alert-destructive .psc-vc\/alert-icon, [class~="psc-vc/alert-destructive"] [class~="psc-vc/alert-icon"] svg, .psc-vc\/alert-destructive .psc-vc\/alert-icon svg {
  color: var(--vc-destructive, #f87171) !important;
  fill: #f87171 !important;
}

[class~="psc-vc/alert-info"] [class~="psc-vc/alert-icon"], .psc-vc\/alert-info .psc-vc\/alert-icon, [class~="psc-vc/alert-info"] [class~="psc-vc/alert-icon"] svg, .psc-vc\/alert-info .psc-vc\/alert-icon svg {
  color: #60a5fa !important;
  fill: #60a5fa !important;
}
[class~="psc-vc/alert-body"], .psc-vc\/alert-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

[class~="psc-vc/alert-title"], .psc-vc\/alert-title, [class~="psc-vc/alert-title"] .ia_label__text, .psc-vc\/alert-title .ia_label__text {
  color: var(--vc-foreground, #fafafa) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

[class~="psc-vc/alert-description"], .psc-vc\/alert-description, [class~="psc-vc/alert-description"] .ia_label__text, .psc-vc\/alert-description .ia_label__text {
  color: var(--vc-muted-fg, #a1a1aa) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

@media (prefers-reduced-motion: reduce) {
  [class~="psc-vc/alert"], .psc-vc\/alert {
    transition: none !important;
  }
}
.psc-vc-r-alert [class~="psc-vc/alert-title"] { font-size:14px!important; line-height:20px!important; font-weight:500!important; min-height:20px!important; text-align:left!important; }
.psc-vc-r-alert [class~="psc-vc/alert-description"] { font-size:14px!important; line-height:20px!important; white-space:normal!important; text-align:left!important; }
.psc-vc-r-alert[class~="psc-vc/alert-success"] { border-color:#22c55e4d!important; background:#22c55e0a!important; }
.psc-vc-r-alert[class~="psc-vc/alert-warning"] { border-color:#eab3084d!important; background:#eab3080a!important; }
.psc-vc-r-alert[class~="psc-vc/alert-destructive"] { border-color:#ef44444d!important; background:#ef44440a!important; }

```