{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "Alert",
  "description": "An alert is a banner that communicates a state or action to the user.",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Alert banners communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action.",
    "attributes": {
      "static": {
        "role": "alert",
        "class": "slds-notify slds-notify_alert"
      }
    },
    "children": [
      {
        "name": "assistiveText",
        "restrict": [
          "span"
        ],
        "description": "Assistive text for screen readers",
        "slot": {
          "name": "assistiveText"
        },
        "attributes": {
          "static": {
            "class": "slds-assistive-text"
          }
        }
      },
      {
        "name": "icon",
        "restrict": [
          "span"
        ],
        "description": "Icon container",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "icon",
          "restrict": [
            "Icon"
          ]
        },
        "children": [
          {
            "name": "iconSvg",
            "description": "Inline SVG element rendered inside the icon container.",
            "component": "PrimitiveIcon",
            "attributes": {
              "static": {
                "class": "slds-icon slds-icon_x-small"
              }
            },
            "children": [
              {
                "name": "iconUse",
                "attributes": {
                  "static": {}
                }
              }
            ]
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-icon_container slds-m-right_x-small"
          }
        },
        "variants": [
          {
            "name": "iconVariant",
            "description": "Utility-icon background class on the icon container; matches the alert variant.",
            "options": [
              {
                "value": "user",
                "class": "slds-icon-utility-user",
                "description": "User icon (info/default)"
              },
              {
                "value": "warning",
                "class": "slds-icon-utility-warning",
                "description": "Warning icon"
              },
              {
                "value": "error",
                "class": "slds-icon-utility-error",
                "description": "Error icon"
              },
              {
                "value": "offline",
                "class": "slds-icon-utility-offline",
                "description": "Offline icon"
              }
            ]
          }
        ]
      },
      {
        "name": "content",
        "restrict": [
          "h2"
        ],
        "description": "Alert message content",
        "slot": {
          "name": "default",
          "required": true
        },
        "children": [
          {
            "name": "link",
            "restrict": [
              "a"
            ],
            "description": "Optional inline action link inside the alert message.",
            "renderWhen": "slotFilled",
            "slot": {
              "name": "link"
            },
            "attributes": {
              "static": {}
            }
          }
        ],
        "attributes": {
          "static": {
            "class": ""
          }
        }
      },
      {
        "name": "close",
        "restrict": [
          "div"
        ],
        "description": "Close button container",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "close",
          "restrict": [
            "Button"
          ]
        },
        "children": [
          {
            "name": "closeButton",
            "restrict": [
              "button"
            ],
            "description": "Close button element.",
            "attributes": {
              "static": {
                "title": "Close",
                "class": "slds-button slds-button_icon slds-button_icon-small"
              }
            },
            "children": [
              {
                "name": "closeButtonIcon",
                "description": "Inline SVG icon inside the close button.",
                "component": "PrimitiveIcon",
                "attributes": {
                  "static": {
                    "class": "slds-button__icon"
                  }
                },
                "children": [
                  {
                    "name": "closeButtonIconUse",
                    "attributes": {
                      "static": {}
                    }
                  }
                ]
              },
              {
                "name": "closeButtonAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually-hidden label for the close button.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ],
            "modifiers": [
              {
                "name": "inverse",
                "description": "Inverse styling for the close button on dark variant backgrounds (info, error, offline).",
                "attribute": "class",
                "value": "slds-button_icon-inverse"
              }
            ]
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-notify__close"
          }
        }
      }
    ],
    "variants": [
      {
        "name": "variant",
        "description": "Alert type/severity",
        "default": "info",
        "options": [
          {
            "value": "info",
            "class": "",
            "description": "Informational alert"
          },
          {
            "value": "warning",
            "class": "slds-alert_warning",
            "description": "Sets styling for warning alert notification"
          },
          {
            "value": "error",
            "class": "slds-alert_error",
            "description": "Sets styling for error alert notification"
          },
          {
            "value": "offline",
            "class": "slds-alert_offline",
            "description": "Sets styling for offline alert notification"
          }
        ]
      }
    ],
    "modifiers": [
      {
        "name": "themeTexture",
        "description": "Apply a theme background with the alert texture overlay (combines slds-theme_alert-texture with the per-variant theme class).",
        "attribute": "class",
        "value": "slds-theme_alert-texture slds-theme_info slds-theme_warning slds-theme_error slds-theme_offline"
      }
    ]
  },
  "states": [
    {
      "name": "dismissed",
      "type": "boolean",
      "description": "Whether the alert has been dismissed"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "role-alert",
        "description": "Alert must have role='alert' to announce to screen readers"
      },
      {
        "id": "close-accessible",
        "description": "Close button must have accessible label"
      },
      {
        "id": "icon-aria-hidden",
        "description": "Decorative SVG icons must set aria-hidden='true'"
      }
    ]
  },
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2017-03-01",
      "genReady": false,
      "lbc": false
    }
  },
  "cssSource": "./alert.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  }
}