{
  "name": "Alert",
  "source": "src/components/Alert.tsx",
  "propsType": "AlertProps",
  "description": "Alert — Figma `Alert` (812:1902).\n\n`Intent` x `Emphasis` x `Layout`, with the parts as props rather than\nvariants. Intents match `Badge` exactly, so a status mapped to one can be\npassed to the other.\n\nROLE IS CHOSEN BY INTENT, NOT PASSED IN. `error` and `warning` render\n`role=\"alert\"`, which interrupts a screen reader; the rest render\n`role=\"status\"`, which waits for a pause. Getting this backwards is the\ncommon failure — a page of `role=\"alert\"` status messages talks over the\nuser, and an error announced as a status is missed.\n\nThe icon is decorative: it repeats what the intent's colour and copy already\nsay, so it is `aria-hidden` and the live region carries the text alone.",
  "import": "import { Alert } from 'ionbase-ui';",
  "status": "stable",
  "since": "0.13.1",
  "summary": "A persistent, in-page status message. Intent picks the ARIA role for you.",
  "useWhen": [
    "the message belongs to the page and should stay until the condition clears",
    "form-level validation summaries, permission notices, degraded-state banners"
  ],
  "useInstead": [
    {
      "when": "the message is transient and self-dismissing",
      "use": "Toast",
      "why": "an Alert stays in the layout; a Toast does not"
    },
    {
      "when": "it labels a value inline rather than telling the user something",
      "use": "Badge",
      "why": "Badge shares Alert's intent vocabulary exactly, so a status mapped to one passes to the other"
    }
  ],
  "variants": {
    "intent": {
      "error": {
        "use": "something failed and the user must act",
        "aria": "role=alert — interrupts the screen reader"
      },
      "warning": {
        "use": "something may fail or has degraded",
        "aria": "role=alert — interrupts the screen reader"
      },
      "success": {
        "use": "an operation completed",
        "aria": "role=status"
      },
      "information": {
        "use": "neutral context the user did not ask for",
        "aria": "role=status"
      },
      "primary": {
        "use": "product announcements and promotions",
        "aria": "role=status"
      },
      "neutral": {
        "use": "low-emphasis context",
        "aria": "role=status"
      }
    },
    "emphasis": {
      "subtle": {
        "use": "the default — tinted surface, readable in long pages"
      },
      "solid": {
        "use": "reserve for a single high-stakes banner; it dominates the layout"
      }
    },
    "layout": {
      "inline": {
        "use": "inside a form or card, in the flow of content"
      },
      "banner": {
        "use": "full-bleed at the top of a page or region"
      }
    }
  },
  "a11y": {
    "guarantees": [
      "the role follows the intent — error and warning are role=alert, everything else role=status",
      "the icon is aria-hidden, so the live region announces the text once and not the glyph"
    ],
    "requires": [
      "`dismissLabel` when `onDismiss` is set and the surrounding copy does not name the action"
    ],
    "notes": [
      "role=alert interrupts whatever the screen reader is saying; role=status waits for a pause. This is why the role is not a prop."
    ]
  },
  "antiPatterns": [
    {
      "dont": "using intent=\"error\" for a message that is merely informational",
      "why": "error renders role=alert, which interrupts the screen reader. A page of interrupting status messages talks over the user."
    },
    {
      "dont": "using intent=\"information\" for a genuine failure",
      "why": "role=status waits for a pause, so a real error can be missed entirely"
    },
    {
      "dont": "rendering an Alert conditionally for a transient confirmation",
      "do": "useToast",
      "why": "an Alert that appears and disappears shifts the layout under the user"
    }
  ],
  "stylesheet": "src/styles/alert.css",
  "tokens": [
    "--border-default",
    "--border-error-strong",
    "--border-error-subtle",
    "--border-information-strong",
    "--border-information-subtle",
    "--border-inverse",
    "--border-primary-strong",
    "--border-primary-subtle",
    "--border-success-strong",
    "--border-success-subtle",
    "--border-warning-strong",
    "--border-warning-subtle",
    "--border-width-default",
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-medium",
    "--font-weight-regular",
    "--icon-error",
    "--icon-information",
    "--icon-inverse",
    "--icon-on-color",
    "--icon-primary",
    "--icon-secondary",
    "--icon-size-md",
    "--icon-success",
    "--icon-warning",
    "--ion-alert-border",
    "--ion-alert-icon",
    "--ion-alert-surface",
    "--ion-alert-text",
    "--ion-duration-base",
    "--ion-ease-out",
    "--radius-md",
    "--radius-sm",
    "--ring-focus",
    "--spacing-12",
    "--spacing-16",
    "--spacing-32",
    "--spacing-4",
    "--spacing-8",
    "--surface-error",
    "--surface-error-subtle",
    "--surface-hover",
    "--surface-information",
    "--surface-information-subtle",
    "--surface-inverse",
    "--surface-muted",
    "--surface-primary",
    "--surface-primary-subtle",
    "--surface-success",
    "--surface-success-subtle",
    "--surface-warning",
    "--surface-warning-subtle",
    "--text-error",
    "--text-information",
    "--text-inverse",
    "--text-link",
    "--text-on-color",
    "--text-secondary",
    "--text-success",
    "--text-warning",
    "--type-body",
    "--type-body-line-height"
  ],
  "props": {
    "intent": {
      "type": "AlertIntent | undefined",
      "required": false,
      "origin": "own",
      "description": "Matches the Figma `Intent` variant. Same vocabulary as `Badge`.",
      "values": [
        "neutral",
        "primary",
        "success",
        "warning",
        "error",
        "information"
      ],
      "default": "information"
    },
    "emphasis": {
      "type": "AlertEmphasis | undefined",
      "required": false,
      "origin": "own",
      "description": "Matches the Figma `Emphasis` variant.",
      "values": [
        "subtle",
        "solid"
      ],
      "default": "subtle"
    },
    "layout": {
      "type": "AlertLayout | undefined",
      "required": false,
      "origin": "own",
      "description": "Matches the Figma `Layout` variant.",
      "values": [
        "inline",
        "banner"
      ],
      "default": "inline"
    },
    "title": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Optional heading above the message."
    },
    "hideIcon": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "Hide the leading icon. Shown by default."
    },
    "icon": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Replace the intent's glyph."
    },
    "actions": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "Action buttons, rendered under the message."
    },
    "onDismiss": {
      "type": "(() => void) | undefined",
      "required": false,
      "origin": "own",
      "description": "Called when the dismiss button is pressed. Omit for no dismiss button."
    },
    "dismissLabel": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "Accessible name for the dismiss button.",
      "default": "Dismiss"
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "The message."
    }
  },
  "propCounts": {
    "own": 10,
    "aria": 0,
    "dom": 276,
    "other": 0
  }
}