In-line alert

In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.

{
  "slug": "in-line-alert",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/in-line-alert.json",
  "title": "In-line alert",
  "description": "In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.",
  "meta": {
    "category": "feedback",
    "documentationUrl": "https://spectrum.adobe.com/page/in-line-alert/"
  },
  "type": "object",
  "properties": {
    "variant": {
      "type": "string",
      "enum": [
        "neutral",
        "informative",
        "positive",
        "notice",
        "negative",
        "accent"
      ],
      "default": "neutral"
    },
    "style": {
      "type": "string",
      "enum": [
        "bold",
        "subtle",
        "outline"
      ],
      "default": "outline",
      "description": "The visual style of the alert."
    },
    "href": {
      "type": "string",
      "description": "Optional URL within in-line alert content like a 'Learn more' link."
    },
    "heading": {
      "type": "string",
      "description": "Optional heading text displayed at the top of the alert."
    },
    "actionLabel": {
      "type": "string",
      "description": "If undefined, this button does not appear."
    }
  }
}