@patternfly/react-docs 7.6.0-prerelease.7 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/alert/react.js

@@ -0,0 +1,1433 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import '../../../../../react-core/src/components/Alert/examples/./alert.css';
+import { Fragment, useEffect, useState } from 'react';
+import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
+import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
+import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
+import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
+import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
+const pageData = {
+  "id": "Alert",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/alert/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Alert/examples/Alert.md",
+  "relPath": "packages/react-core/src/components/Alert/examples/Alert.md",
+  "propComponents": [
+    {
+      "name": "Alert",
+      "description": "The main alert component.",
+      "props": [
+        {
+          "name": "actionClose",
+          "type": "React.ReactNode",
+          "description": "Close button; use the alert action close button component."
+        },
+        {
+          "name": "actionLinks",
+          "type": "React.ReactNode",
+          "description": "Action links; use a single alert action link component or multiple wrapped in an array\nor React fragment."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the alert.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes to add to the alert.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "component",
+          "type": "React.JSX.IntrinsicElements",
+          "description": "Sets the element to use as the alert title. Default is h4.",
+          "defaultValue": "'h4'"
+        },
+        {
+          "name": "customIcon",
+          "type": "React.ReactNode",
+          "description": "Set a custom icon to the alert. If not set the icon is set according to the variant."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Uniquely identifies the alert."
+        },
+        {
+          "name": "isExpandable",
+          "type": "boolean",
+          "description": "Flag indicating that the alert is expandable.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isInline",
+          "type": "boolean",
+          "description": "Flag to indicate if the alert is inline.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isLiveRegion",
+          "type": "boolean",
+          "description": "Flag to indicate if the alert is in a live region.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isPlain",
+          "type": "boolean",
+          "description": "Flag to indicate if the alert is plain.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onMouseEnter",
+          "type": "No type info",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "onMouseLeave",
+          "type": "No type info",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "onTimeout",
+          "type": "() => void",
+          "description": "Function to be executed on alert timeout. Relevant when the timeout prop is set.",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "timeout",
+          "type": "number | boolean",
+          "description": "If set to true, the timeout is 8000 milliseconds. If a number is provided, alert will\nbe dismissed after that amount of time in milliseconds.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "timeoutAnimation",
+          "type": "number",
+          "description": "If the user hovers over the alert and `timeout` expires, this is how long to wait\nbefore finally dismissing the alert.",
+          "defaultValue": "3000"
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Title of the alert.",
+          "required": true
+        },
+        {
+          "name": "toggleAriaLabel",
+          "type": "string",
+          "description": "Adds accessible text to the alert toggle."
+        },
+        {
+          "name": "tooltipPosition",
+          "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
+          "description": "Position of the tooltip which is displayed if text is truncated."
+        },
+        {
+          "name": "truncateTitle",
+          "type": "number",
+          "description": "Truncate title to number of lines.",
+          "defaultValue": "0"
+        },
+        {
+          "name": "variant",
+          "type": "'success' | 'danger' | 'warning' | 'info' | 'custom'",
+          "description": "Adds alert variant styles.",
+          "defaultValue": "AlertVariant.custom"
+        },
+        {
+          "name": "variantLabel",
+          "type": "string",
+          "description": "Variant label text for screen readers."
+        }
+      ]
+    },
+    {
+      "name": "AlertGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | (() => HTMLElement)",
+          "description": "Determine where the alert is appended to"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds an accessible label to the alert group."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Alerts to be rendered in the AlertGroup"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the AlertGroup"
+        },
+        {
+          "name": "hasAnimations",
+          "type": "boolean",
+          "description": "Flag to indicate whether Alerts are animated upon rendering and being dismissed. This is intended\nto remain false for testing purposes only.",
+          "beta": true
+        },
+        {
+          "name": "isLiveRegion",
+          "type": "boolean",
+          "description": "Turns the container into a live region so that changes to content within the AlertGroup, such as appending an Alert, are reliably announced to assistive technology."
+        },
+        {
+          "name": "isToast",
+          "type": "boolean",
+          "description": "Toast notifications are positioned at the top right corner of the viewport"
+        },
+        {
+          "name": "onOverflowClick",
+          "type": "() => void",
+          "description": "Function to call if user clicks on overflow message"
+        },
+        {
+          "name": "overflowMessage",
+          "type": "string",
+          "description": "Custom text to show for the overflow message"
+        }
+      ]
+    },
+    {
+      "name": "AlertActionCloseButton",
+      "description": "Renders a close button for a dismissable alert when this sub-component is passed into\nthe alert's actionClose property.",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds accessible text to the button.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the button"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the button"
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType<any> | React.ComponentType<any>",
+          "description": "Sets the base component to render. defaults to button"
+        },
+        {
+          "name": "countOptions",
+          "type": "BadgeCountObject",
+          "description": "Adds count number to button"
+        },
+        {
+          "name": "hamburgerVariant",
+          "type": "'expand' | 'collapse'",
+          "description": "Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button."
+        },
+        {
+          "name": "hasNoPadding",
+          "type": "boolean",
+          "description": "Applies no padding on a plain button variant. Use when plain button is placed inline with text"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode | null",
+          "description": "Icon for the button."
+        },
+        {
+          "name": "iconPosition",
+          "type": "'start' | 'end' | 'left' | 'right'",
+          "description": "Sets position of the icon. Note: \"left\" and \"right\" are deprecated. Use \"start\" and \"end\" instead"
+        },
+        {
+          "name": "inoperableEvents",
+          "type": "string[]",
+          "description": "Events to prevent when the button is in an aria-disabled state"
+        },
+        {
+          "name": "isAriaDisabled",
+          "type": "boolean",
+          "description": "Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute"
+        },
+        {
+          "name": "isBlock",
+          "type": "boolean",
+          "description": "Adds block styling to button"
+        },
+        {
+          "name": "isCircle",
+          "type": "boolean",
+          "description": "Flag indicating the button is a circle button. Intended for buttons that only contain an icon..",
+          "beta": true
+        },
+        {
+          "name": "isClicked",
+          "type": "boolean",
+          "description": "Adds clicked styling to button."
+        },
+        {
+          "name": "isDanger",
+          "type": "boolean",
+          "description": "Adds danger styling to secondary or link button variants"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Adds disabled styling and disables the button using the disabled html attribute"
+        },
+        {
+          "name": "isDocked",
+          "type": "boolean",
+          "description": "Flag indicating the button is a docked variant button. For use in docked navigation.",
+          "beta": true
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true."
+        },
+        {
+          "name": "isFavorite",
+          "type": "boolean",
+          "description": "Adds favorite styling to a button"
+        },
+        {
+          "name": "isFavorited",
+          "type": "boolean",
+          "description": "Flag indicating whether the button is favorited or not, only when isFavorite is true."
+        },
+        {
+          "name": "isHamburger",
+          "type": "boolean",
+          "description": "Flag indicating the button is a hamburger button. This will override the icon property."
+        },
+        {
+          "name": "isInline",
+          "type": "boolean",
+          "description": "Adds inline styling to a link button"
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "description": "Adds progress styling to button"
+        },
+        {
+          "name": "isSettings",
+          "type": "boolean",
+          "description": "Flag indicating the button is a settings button. This will override the icon property."
+        },
+        {
+          "name": "isTextExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the docked button should display text. Only applies when isDocked is true.",
+          "beta": true
+        },
+        {
+          "name": "onClose",
+          "type": "() => void",
+          "description": "A callback for when the close button is clicked.",
+          "defaultValue": "() => undefined as any"
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "size",
+          "type": "'default' | 'sm' | 'lg'",
+          "description": "Adds styling which affects the size of the button"
+        },
+        {
+          "name": "spinnerAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the spinner to describe what is loading"
+        },
+        {
+          "name": "spinnerAriaLabelledBy",
+          "type": "string",
+          "description": "Id of element which describes what is being loaded"
+        },
+        {
+          "name": "spinnerAriaValueText",
+          "type": "string",
+          "description": "Text describing that current loading status or progress"
+        },
+        {
+          "name": "state",
+          "type": "'read' | 'unread' | 'attention'",
+          "description": "Sets state of the stateful button variant. Default is \"unread\""
+        },
+        {
+          "name": "tabIndex",
+          "type": "number",
+          "description": "Sets the button tabindex."
+        },
+        {
+          "name": "type",
+          "type": "'button' | 'submit' | 'reset'",
+          "description": "Sets button type"
+        },
+        {
+          "name": "variant",
+          "type": "'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | 'stateful'",
+          "description": "Adds button variant styles"
+        },
+        {
+          "name": "variantLabel",
+          "type": "string",
+          "description": "Variant Label for the close button."
+        }
+      ]
+    },
+    {
+      "name": "AlertActionLink",
+      "description": "Renders buttons styled as links beneath the alert title and description when this sub-component\nis passed into the alert's actionLinks property.",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds accessible text to the button."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the button"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the button",
+          "defaultValue": "''"
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType<any> | React.ComponentType<any>",
+          "description": "Sets the base component to render. defaults to button"
+        },
+        {
+          "name": "countOptions",
+          "type": "BadgeCountObject",
+          "description": "Adds count number to button"
+        },
+        {
+          "name": "hamburgerVariant",
+          "type": "'expand' | 'collapse'",
+          "description": "Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button."
+        },
+        {
+          "name": "hasNoPadding",
+          "type": "boolean",
+          "description": "Applies no padding on a plain button variant. Use when plain button is placed inline with text"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode | null",
+          "description": "Icon for the button."
+        },
+        {
+          "name": "iconPosition",
+          "type": "'start' | 'end' | 'left' | 'right'",
+          "description": "Sets position of the icon. Note: \"left\" and \"right\" are deprecated. Use \"start\" and \"end\" instead"
+        },
+        {
+          "name": "inoperableEvents",
+          "type": "string[]",
+          "description": "Events to prevent when the button is in an aria-disabled state"
+        },
+        {
+          "name": "isAriaDisabled",
+          "type": "boolean",
+          "description": "Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute"
+        },
+        {
+          "name": "isBlock",
+          "type": "boolean",
+          "description": "Adds block styling to button"
+        },
+        {
+          "name": "isCircle",
+          "type": "boolean",
+          "description": "Flag indicating the button is a circle button. Intended for buttons that only contain an icon..",
+          "beta": true
+        },
+        {
+          "name": "isClicked",
+          "type": "boolean",
+          "description": "Adds clicked styling to button."
+        },
+        {
+          "name": "isDanger",
+          "type": "boolean",
+          "description": "Adds danger styling to secondary or link button variants"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Adds disabled styling and disables the button using the disabled html attribute"
+        },
+        {
+          "name": "isDocked",
+          "type": "boolean",
+          "description": "Flag indicating the button is a docked variant button. For use in docked navigation.",
+          "beta": true
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true."
+        },
+        {
+          "name": "isFavorite",
+          "type": "boolean",
+          "description": "Adds favorite styling to a button"
+        },
+        {
+          "name": "isFavorited",
+          "type": "boolean",
+          "description": "Flag indicating whether the button is favorited or not, only when isFavorite is true."
+        },
+        {
+          "name": "isHamburger",
+          "type": "boolean",
+          "description": "Flag indicating the button is a hamburger button. This will override the icon property."
+        },
+        {
+          "name": "isInline",
+          "type": "boolean",
+          "description": "Adds inline styling to a link button"
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "description": "Adds progress styling to button"
+        },
+        {
+          "name": "isSettings",
+          "type": "boolean",
+          "description": "Flag indicating the button is a settings button. This will override the icon property."
+        },
+        {
+          "name": "isTextExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the docked button should display text. Only applies when isDocked is true.",
+          "beta": true
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "size",
+          "type": "'default' | 'sm' | 'lg'",
+          "description": "Adds styling which affects the size of the button"
+        },
+        {
+          "name": "spinnerAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the spinner to describe what is loading"
+        },
+        {
+          "name": "spinnerAriaLabelledBy",
+          "type": "string",
+          "description": "Id of element which describes what is being loaded"
+        },
+        {
+          "name": "spinnerAriaValueText",
+          "type": "string",
+          "description": "Text describing that current loading status or progress"
+        },
+        {
+          "name": "state",
+          "type": "'read' | 'unread' | 'attention'",
+          "description": "Sets state of the stateful button variant. Default is \"unread\""
+        },
+        {
+          "name": "tabIndex",
+          "type": "number",
+          "description": "Sets the button tabindex."
+        },
+        {
+          "name": "type",
+          "type": "'button' | 'submit' | 'reset'",
+          "description": "Sets button type"
+        },
+        {
+          "name": "variant",
+          "type": "'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | 'stateful'",
+          "description": "Adds button variant styles"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-alert",
+    "pf-v6-c-alert-group"
+  ],
+  "examples": [
+    "Alert variants",
+    "Alert variations",
+    "Alert timeout",
+    "Expandable alerts",
+    "Truncated alerts",
+    "Custom icons",
+    "Inline alerts variants",
+    "Inline alert variations",
+    "Plain inline alert variants",
+    "Plain inline alert variations",
+    "Static live region alerts",
+    "Dynamic live region alerts",
+    "Asynchronous live region alerts",
+    "Static inline alert group",
+    "Toast alert group",
+    "Toast alert group with overflow capture",
+    "Asynchronous alert groups",
+    "Dynamic alert groups",
+    "Dynamic alert group with overflow message",
+    "Multiple dynamic alert groups"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useEffect,
+  useState,
+  RhUiUsersFillIcon,
+  RhUiContainerFillIcon,
+  DatabaseIcon,
+  RhUiServerStackFillIcon,
+  LaptopIcon,
+  buttonStyles
+};
+pageData.relativeImports = "import 'react-core/src/components/Alert/examples/./alert.css';"
+pageData.examples = {
+  'Alert variants': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Alert } from '@patternfly/react-core';\n\nexport const AlertVariants: React.FunctionComponent = () => (\n  <Fragment>\n    <Alert title=\"Custom alert title\" ouiaId=\"CustomAlert\" />\n    <Alert variant=\"info\" title=\"Info alert title\" ouiaId=\"InfoAlert\" />\n    <Alert variant=\"success\" title=\"Success alert title\" ouiaId=\"SuccessAlert\" />\n    <Alert variant=\"warning\" title=\"Warning alert title\" ouiaId=\"WarningAlert\" />\n    <Alert variant=\"danger\" title=\"Danger alert title\" ouiaId=\"DangerAlert\" />\n  </Fragment>\n);\n","title":"Alert variants","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`PatternFly supports several alert variants for different scenarios. Each variant has an associated status icon, background, and alert title coded to communicate the severity of an alert. Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant`}
+        </code>
+        {` property to apply the following styling options. If no `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant`}
+        </code>
+        {` is specified, then the variant will be set to "custom".`}
+      </p>
+      
+      <table {...{"className":"ws-table  pf-v6-c-table pf-m-grid-lg pf-m-compact","role":"grid"}}>
+        
+
+        
+        <thead {...{"className":"pf-v6-c-table__thead"}}>
+          
+
+          
+          <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
+            
+
+            
+            <th {...{"className":"undefined pf-v6-c-table__th pf-m-wrap","role":"columnheader","scope":"col"}}>
+              
+              <div {...{"className":""}}>
+                {`Variant`}
+              </div>
+            </th>
+            
+
+            
+            <th {...{"className":"undefined pf-v6-c-table__th pf-m-wrap","role":"columnheader","scope":"col"}}>
+              
+              <div {...{"className":""}}>
+                {`Description`}
+              </div>
+            </th>
+            
+
+          </tr>
+          
+
+        </thead>
+        
+
+        
+        <tbody {...{"role":"rowgroup","className":"pf-v6-c-table__tbody"}}>
+          
+
+          
+          <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
+            
+
+            
+            <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
+              
+              <div {...{"className":""}}>
+                {`Custom`}
+              </div>
+            </td>
+            
+
+            
+            <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
+              
+              <div {...{"className":""}}>
+                {`Use for generic messages that should have a custom color set by the associated CSS variable. Should be used when the message has no associated severity.`}
+              </div>
+            </td>
+            
+
+          </tr>
+          
+
+          
+          <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
+            
+
+            
+            <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
+              
+              <div {...{"className":""}}>
+                {`Info`}
+              </div>
+            </td>
+            
+
+            
+            <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
+              
+              <div {...{"className":""}}>
+                {`Use for general informational messages`}
+              </div>
+            </td>
+            
+
+          </tr>
+          
+
+          
+          <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
+            
+
+            
+            <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
+              
+              <div {...{"className":""}}>
+                {`Success`}
+              </div>
+            </td>
+            
+
+            
+            <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
+              
+              <div {...{"className":""}}>
+                {`Use to indicate that a task or process has been completed successfully`}
+              </div>
+            </td>
+            
+
+          </tr>
+          
+
+          
+          <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
+            
+
+            
+            <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
+              
+              <div {...{"className":""}}>
+                {`Warning`}
+              </div>
+            </td>
+            
+
+            
+            <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
+              
+              <div {...{"className":""}}>
+                {`Use to indicate that a non-critical error has occurred`}
+              </div>
+            </td>
+            
+
+          </tr>
+          
+
+          
+          <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
+            
+
+            
+            <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
+              
+              <div {...{"className":""}}>
+                {`Danger`}
+              </div>
+            </td>
+            
+
+            
+            <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
+              
+              <div {...{"className":""}}>
+                {`Use to indicate that a critical or blocking error has occurred`}
+              </div>
+            </td>
+            
+
+          </tr>
+          
+
+        </tbody>
+        
+
+      </table>
+    </Example>,
+  'Alert variations': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';\n\nexport const AlertVariations: React.FunctionComponent = () => (\n  <Fragment>\n    <Alert\n      variant=\"success\"\n      title=\"Success alert title\"\n      actionLinks={\n        <Fragment>\n          <AlertActionLink component=\"a\" href=\"#\">\n            View details\n          </AlertActionLink>\n          <AlertActionLink // eslint-disable-next-line no-console\n            onClick={() => console.log('Clicked on Ignore')}\n          >\n            Ignore\n          </AlertActionLink>\n        </Fragment>\n      }\n    >\n      <p>Success alert description. This should tell the user more information about the alert.</p>\n    </Alert>\n    <Alert variant=\"success\" title=\"Success alert title\">\n      <p>\n        Success alert description. This should tell the user more information about the alert.{' '}\n        <a href=\"#\">This is a link.</a>\n      </p>\n    </Alert>\n    <Alert\n      variant=\"success\"\n      title=\"Success alert title\"\n      // eslint-disable-next-line no-console\n      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}\n    >\n      <p>Short alert description.</p>\n    </Alert>\n    <Alert variant=\"success\" title=\"div success alert title\" component=\"div\" />\n    <Alert variant=\"success\" title=\"h6 Success alert title\" component=\"h6\">\n      <p>Short alert description.</p>\n    </Alert>\n  </Fragment>\n);\n","title":"Alert variations","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`PatternFly supports several properties and variations that can be used to add extra content to an alert.`}
+      </p>
+      
+      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          
+
+          
+          <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+            {`As demonstrated in the 1st variation below, use the `}
+            
+            <code {...{"className":"ws-code "}}>
+              {`actionLinks`}
+            </code>
+            {` property to add one or more `}
+            
+            <code {...{"className":"ws-code "}}>
+              {`<AlertActionLink>`}
+            </code>
+            {` components that place links beneath the alert message. You must pass in `}
+            
+            <code {...{"className":"ws-code "}}>
+              {`href`}
+            </code>
+            {` and `}
+            
+            <code {...{"className":"ws-code "}}>
+              {`component="a"`}
+            </code>
+            {` properties to have an `}
+            
+            <code {...{"className":"ws-code "}}>
+              {`<AlertActionLink>`}
+            </code>
+            {` act as a proper link, rather than as a button.`}
+          </p>
+          
+
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          
+
+          
+          <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+            {`As demonstrated in the 2nd variation below, use a native HTML `}
+            
+            <code {...{"className":"ws-code "}}>
+              {`<a>`}
+            </code>
+            {` element to add links within an alert message.`}
+          </p>
+          
+
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          
+
+          
+          <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+            {`As demonstrated in the 3rd variation below, use the `}
+            
+            <code {...{"className":"ws-code "}}>
+              {`actionClose`}
+            </code>
+            {` property to add an `}
+            
+            <code {...{"className":"ws-code "}}>
+              {`<AlertActionCloseButton>`}
+            </code>
+            {` component, which can be used to manage and customize alert dismissals.`}
+          </p>
+          
+
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          
+
+          
+          <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+            {`As demonstrated in the 4th and 5th variations below, use the `}
+            
+            <code {...{"className":"ws-code "}}>
+              {`component`}
+            </code>
+            {` property to set the element for an alert title.`}
+          </p>
+          
+
+          
+          <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+            
+
+            
+            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+              {`If there is not a description passed via `}
+              
+              <code {...{"className":"ws-code "}}>
+                {`children`}
+              </code>
+              {` prop, then the `}
+              
+              <code {...{"className":"ws-code "}}>
+                {`component`}
+              </code>
+              {` prop should be set to a non-heading element such as a `}
+              
+              <code {...{"className":"ws-code "}}>
+                {`span`}
+              </code>
+              {` or `}
+              
+              <code {...{"className":"ws-code "}}>
+                {`div`}
+              </code>
+              {`.`}
+            </li>
+            
+
+            
+            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+              {`If there is a description passed via `}
+              
+              <code {...{"className":"ws-code "}}>
+                {`children`}
+              </code>
+              {` prop, then the `}
+              
+              <code {...{"className":"ws-code "}}>
+                {`component`}
+              </code>
+              {` prop should be a heading element. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `}
+              
+              <code {...{"className":"ws-code "}}>
+                {`h2`}
+              </code>
+              {` level should not be followed directly by an `}
+              
+              <code {...{"className":"ws-code "}}>
+                {`h4`}
+              </code>
+              {`.`}
+            </li>
+            
+
+          </ul>
+          
+
+        </li>
+        
+
+      </ul>
+    </Example>,
+  'Alert timeout': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-core';\n\nexport const AlertTimeout: React.FunctionComponent = () => {\n  const [alerts, setAlerts] = useState<React.ReactNode[]>([]);\n  const [newAlertKey, setNewAlertKey] = useState<number>(0);\n\n  const onClick = () => {\n    const timeout = 8000;\n    setNewAlertKey((key) => key + 1);\n    setAlerts((prevAlerts) => [\n      <Alert\n        title=\"Default timeout Alert\"\n        timeout={timeout}\n        actionLinks={\n          <Fragment>\n            <AlertActionLink component=\"a\" href=\"#\">\n              View details\n            </AlertActionLink>\n            <AlertActionLink // eslint-disable-next-line no-console\n              onClick={() => console.log('Clicked on Ignore')}\n            >\n              Ignore\n            </AlertActionLink>\n          </Fragment>\n        }\n        key={newAlertKey}\n      >\n        This alert will dismiss after {`${timeout / 1000} seconds`}\n      </Alert>,\n      ...prevAlerts\n    ]);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"secondary\" onClick={onClick}>\n        Add alert\n      </Button>\n      <AlertGroup hasAnimations isLiveRegion>\n        {alerts}\n      </AlertGroup>\n    </Fragment>\n  );\n};\n","title":"Alert timeout","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`timeout`}
+        </code>
+        {` property to automatically dismiss an alert after a period of time. If set to `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`true`}
+        </code>
+        {`, the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`timeout`}
+        </code>
+        {` will be 8000 milliseconds. Provide a specific value to dismiss the alert after a different number of milliseconds.`}
+      </p>
+    </Example>,
+  'Expandable alerts': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';\n\nexport const AlertExpandable: React.FunctionComponent = () => (\n  <Fragment>\n    <Alert\n      isExpandable\n      variant=\"success\"\n      title=\"Success alert title\"\n      // eslint-disable-next-line no-console\n      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}\n    >\n      <p>Success alert description. This should tell the user more information about the alert.</p>\n    </Alert>\n    <Alert\n      isExpandable\n      isInline\n      variant=\"success\"\n      title=\"Success alert title\"\n      actionLinks={\n        <Fragment>\n          <AlertActionLink component=\"a\" href=\"#\">\n            View details\n          </AlertActionLink>\n          <AlertActionLink // eslint-disable-next-line no-console\n            onClick={() => console.log('Clicked on Ignore')}\n          >\n            Ignore\n          </AlertActionLink>\n        </Fragment>\n      }\n    >\n      <p>Success alert description. This should tell the user more information about the alert.</p>\n    </Alert>\n  </Fragment>\n);\n","title":"Expandable alerts","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`An alert can contain additional, hidden information that is made visible when users click a caret icon. This information can be expanded and collapsed each time the icon is clicked.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`It is not recommended to use an expandable alert with a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`timeout`}
+        </code>
+        {` in a `}
+        
+        <PatternflyThemeLink {...{"to":"/components/alert#toast-alert-group","className":""}}>
+          {`toast alert group`}
+        </PatternflyThemeLink>
+        {` because the alert could timeout before users have time to interact with and view the entire alert.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`See the `}
+        
+        <PatternflyThemeLink {...{"to":"/components/alert/accessibility#toast-alerts","className":""}}>
+          {`toast alert considerations`}
+        </PatternflyThemeLink>
+        {` section of the alert accessibility documentation to understand the accessibility risks associated with using toast alerts.`}
+      </p>
+    </Example>,
+  'Truncated alerts': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Alert } from '@patternfly/react-core';\n\nexport const AlertTruncated: React.FunctionComponent = () => (\n  <Fragment>\n    <Alert\n      variant=\"info\"\n      truncateTitle={1}\n      title={`\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.\n  `}\n    />\n    <Alert\n      variant=\"warning\"\n      truncateTitle={2}\n      title={`\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.\n  `}\n    />\n    <Alert\n      variant=\"danger\"\n      truncateTitle={3}\n      title={`\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.\n  `}\n    />\n  </Fragment>\n);\n","title":"Truncated alerts","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`truncateTitle`}
+        </code>
+        {` property to shorten a long `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`title`}
+        </code>
+        {`. Set `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`truncateTitle`}
+        </code>
+        {` equal to a number (passed in as `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`{n}`}
+        </code>
+        {`) to reduce the number of lines of text in the alert's `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`title`}
+        </code>
+        {`. Users may hover over or tab to a truncated `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`title`}
+        </code>
+        {` to see the full message in a tooltip.`}
+      </p>
+    </Example>,
+  'Custom icons': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Alert } from '@patternfly/react-core';\nimport RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';\nimport RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';\nimport DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';\nimport RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';\nimport LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';\n\nexport const AlertCustomIcons: React.FunctionComponent = () => (\n  <Fragment>\n    <Alert customIcon={<RhUiUsersFillIcon />} title=\"Default alert title\" />\n    <Alert customIcon={<RhUiContainerFillIcon />} variant=\"info\" title=\"Info alert title\" />\n    <Alert customIcon={<DatabaseIcon />} variant=\"success\" title=\"Success alert title\" />\n    <Alert customIcon={<RhUiServerStackFillIcon />} variant=\"warning\" title=\"Warning alert title\" />\n    <Alert customIcon={<LaptopIcon />} variant=\"danger\" title=\"Danger alert title\" />\n  </Fragment>\n);\n","title":"Custom icons","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`customIcon`}
+        </code>
+        {` property to replace a default alert icon with a custom icon.`}
+      </p>
+    </Example>,
+  'Inline alerts variants': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Alert } from '@patternfly/react-core';\n\nexport const AlertInlineVariants: React.FunctionComponent = () => (\n  <Fragment>\n    <Alert variant=\"custom\" isInline title=\"Custom inline alert title\" />\n    <Alert variant=\"info\" isInline title=\"Info inline alert title\" />\n    <Alert variant=\"success\" isInline title=\"Success inline alert title\" />\n    <Alert variant=\"warning\" isInline title=\"Warning inline alert title\" />\n    <Alert variant=\"danger\" isInline title=\"Danger inline alert title\" />\n  </Fragment>\n);\n","title":"Inline alerts variants","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use inline alerts to display an alert inline with content. All alert variants may use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isInline`}
+        </code>
+        {` property to position alerts in content-heavy areas, such as within forms, wizards, or drawers.`}
+      </p>
+    </Example>,
+  'Inline alert variations': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';\n\nexport const AlertInlineVariations: React.FunctionComponent = () => (\n  <Fragment>\n    <Alert\n      isInline\n      variant=\"success\"\n      title=\"Success alert title\"\n      actionLinks={\n        <Fragment>\n          <AlertActionLink component=\"a\" href=\"#\">\n            View details\n          </AlertActionLink>\n          <AlertActionLink // eslint-disable-next-line no-console\n            onClick={() => console.log('Clicked on Ignore')}\n          >\n            Ignore\n          </AlertActionLink>\n        </Fragment>\n      }\n    >\n      <p>Success alert description. This should tell the user more information about the alert.</p>\n    </Alert>\n    <Alert isInline variant=\"success\" title=\"Success alert title\">\n      <p>\n        Success alert description. This should tell the user more information about the alert.{' '}\n        <a href=\"#\">This is a link.</a>\n      </p>\n    </Alert>\n    <Alert\n      isInline\n      variant=\"success\"\n      title=\"Success alert title\"\n      // eslint-disable-next-line no-console\n      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}\n    >\n      <p>Short alert description.</p>\n    </Alert>\n    <Alert isInline variant=\"success\" title=\"div success alert title\" component=\"div\" />\n    <Alert isInline variant=\"success\" title=\"h6 Success alert title\" component=\"h6\">\n      <p>Short alert description.</p>\n    </Alert>\n  </Fragment>\n);\n","title":"Inline alert variations","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`All general alert variations can use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isInline`}
+        </code>
+        {` property to apply inline styling.`}
+      </p>
+    </Example>,
+  'Plain inline alert variants': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Alert } from '@patternfly/react-core';\n\nexport const AlertPlainInlineVariants: React.FunctionComponent = () => (\n  <Fragment>\n    <Alert variant=\"custom\" isInline isPlain title=\"Custom inline alert title\" />\n    <Alert variant=\"info\" isInline isPlain title=\"Info inline alert title\" />\n    <Alert variant=\"success\" isInline isPlain title=\"Success inline alert title\" />\n    <Alert variant=\"warning\" isInline isPlain title=\"Warning inline alert title\" />\n    <Alert variant=\"danger\" isInline isPlain title=\"Danger inline alert title\" />\n  </Fragment>\n);\n","title":"Plain inline alert variants","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isPlain`}
+        </code>
+        {` property to make any inline alert plain. Plain styling removes the colored background but keeps colored text and icons.`}
+      </p>
+    </Example>,
+  'Plain inline alert variations': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Alert } from '@patternfly/react-core';\n\nexport const AlertPlainInlineVariations: React.FunctionComponent = () => (\n  <Alert isInline isPlain variant=\"success\" title=\"Success alert title\">\n    <p>Success alert description. This should tell the user more information about the alert.</p>\n  </Alert>\n);\n","title":"Plain inline alert variations","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`It is not recommended to use a plain inline alert with `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`actionClose`}
+        </code>
+        {` nor `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`actionLinks`}
+        </code>
+        {` because these alerts are non-dismissible and should persist until the error or action related to the alert is resolved.`}
+      </p>
+    </Example>,
+  'Static live region alerts': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Alert, AlertActionCloseButton } from '@patternfly/react-core';\n\nexport const AlertStaticLiveRegion: React.FunctionComponent = () => (\n  <Fragment>\n    <Alert\n      isLiveRegion\n      variant=\"info\"\n      title=\"Default live region configuration\"\n      // eslint-disable-next-line no-console\n      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}\n    >\n      This alert uses the recommended <code>isLiveRegion</code> prop to automatically set ARIA attributes and CSS\n      classes.\n    </Alert>\n    <Alert\n      aria-live=\"assertive\"\n      aria-relevant=\"additions text\"\n      aria-atomic=\"true\"\n      variant=\"info\"\n      title=\"Customized live region\"\n      // eslint-disable-next-line no-console\n      actionClose={<AlertActionCloseButton onClose={() => console.log('Clicked the close button')} />}\n    >\n      You can alternatively omit the <code>isLiveRegion</code> prop to specify ARIA attributes and CSS manually on the\n      containing element.\n    </Alert>\n  </Fragment>\n);\n","title":"Static live region alerts","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Live region alerts allow you to expose dynamic content changes in a way that can be announced by assistive technologies.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`By default, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isLiveRegion`}
+        </code>
+        {`alerts are static.`}
+      </p>
+    </Example>,
+  'Dynamic live region alerts': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Alert, AlertGroup, AlertVariant, Flex, FlexItem } from '@patternfly/react-core';\nimport buttonStyles from '@patternfly/react-styles/css/components/Button/button';\n\ninterface AlertInfo {\n  title: string;\n  variant: AlertVariant;\n  key: number;\n}\n\nexport const DynamicLiveRegionAlert: React.FunctionComponent = () => {\n  const [alerts, setAlerts] = useState<AlertInfo[]>([]);\n  const getUniqueId: () => number = () => new Date().getTime();\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');\n\n  const addAlert = (alertInfo: AlertInfo) => {\n    setAlerts((prevAlertInfo) => [alertInfo, ...prevAlertInfo]);\n  };\n\n  const addSuccessAlert = () => {\n    addAlert({\n      title: 'Single success alert',\n      variant: AlertVariant.success,\n      key: getUniqueId()\n    });\n  };\n  const addInfoAlert = () => {\n    addAlert({\n      title: 'Single info alert',\n      variant: AlertVariant.info,\n      key: getUniqueId()\n    });\n  };\n  const addDangerAlert = () => {\n    addAlert({\n      title: 'Single danger alert',\n      variant: AlertVariant.danger,\n      key: getUniqueId()\n    });\n  };\n\n  return (\n    <Fragment>\n      <Flex gap={{ default: 'gapXs' }} style={{ marginBottom: '16px' }}>\n        <FlexItem>\n          <button onClick={addSuccessAlert} type=\"button\" className={btnClasses}>\n            Add single success alert\n          </button>\n        </FlexItem>\n        <FlexItem>\n          <button onClick={addInfoAlert} type=\"button\" className={btnClasses}>\n            Add single info alert\n          </button>\n        </FlexItem>\n        <FlexItem>\n          <button onClick={addDangerAlert} type=\"button\" className={btnClasses}>\n            Add single danger alert\n          </button>\n        </FlexItem>\n      </Flex>\n      <AlertGroup hasAnimations isLiveRegion aria-live=\"polite\" aria-relevant=\"additions text\" aria-atomic=\"false\">\n        {alerts.map(({ title, variant, key }) => (\n          <Alert variant={variant} title={title} key={key} />\n        ))}\n      </AlertGroup>\n    </Fragment>\n  );\n};\n","title":"Dynamic live region alerts","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Alerts that are asynchronously appended into dynamic `}
+        
+        <PatternflyThemeLink {...{"to":"/components/alert/#alert-group-examples","className":""}}>
+          {`alert groups`}
+        </PatternflyThemeLink>
+        {` via the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isLiveRegion`}
+        </code>
+        {` property will be announced to assistive technology the moment the change happens, following the strategy used for `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-atomic`}
+        </code>
+        {`, which defaults to false. This means only changes of type "addition" will be announced.`}
+      </p>
+    </Example>,
+  'Asynchronous live region alerts': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useEffect, useState } from 'react';\nimport { Alert, AlertGroup, AlertVariant, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';\n\ninterface AlertInfo {\n  title: string;\n  variant: AlertVariant;\n  key: number;\n}\n\nexport const AsyncLiveRegionAlert: React.FunctionComponent = () => {\n  const [alerts, setAlerts] = useState<AlertInfo[]>([]);\n  const [isActive, setIsActive] = useState(false);\n  const getUniqueId: () => number = () => new Date().getTime();\n\n  const addAlert = (alertInfo: AlertInfo) => {\n    setAlerts((prevAlertInfo) => [alertInfo, ...prevAlertInfo]);\n  };\n\n  useEffect(() => {\n    let timer = null;\n    if (isActive) {\n      timer = setInterval(() => {\n        addAlert({\n          title: `Async alert number ${alerts.length + 1}`,\n          variant: AlertVariant.info,\n          key: getUniqueId()\n        });\n      }, 4500);\n    } else {\n      clearInterval(timer);\n    }\n\n    return () => {\n      clearInterval(timer);\n    };\n  }, [isActive, alerts]);\n\n  return (\n    <Fragment>\n      <ToggleGroup aria-label=\"Toggle asynchronous alerts\">\n        <ToggleGroupItem\n          text=\"Async alerts on\"\n          buttonId=\"async-alerts-on\"\n          isSelected={isActive}\n          onChange={() => setIsActive(!isActive)}\n        />\n      </ToggleGroup>\n      <AlertGroup hasAnimations isLiveRegion>\n        {alerts.map(({ title, variant, key }) => (\n          <Alert variant={variant} title={title} key={key} />\n        ))}\n      </AlertGroup>\n    </Fragment>\n  );\n};\n","title":"Asynchronous live region alerts","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This example shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the `}
+        
+        <PatternflyThemeLink {...{"to":"/components/alert/accessibility/","className":""}}>
+          {`alert accessibility`}
+        </PatternflyThemeLink>
+        {` for more information.`}
+      </p>
+    </Example>,
+  'Static inline alert group': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Alert, AlertGroup } from '@patternfly/react-core';\n\nexport const AlertGroupStatic: React.FunctionComponent = () => (\n  <Fragment>\n    <AlertGroup>\n      <Alert title=\"Success alert\" variant=\"success\" isInline />\n      <Alert title=\"Info alert\" variant=\"info\" isInline />\n    </AlertGroup>\n  </Fragment>\n);\n","title":"Static inline alert group","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`All alert group variants may combine multiple `}
+        
+        <PatternflyThemeLink {...{"to":"/components/alert","className":""}}>
+          {`alert variants`}
+        </PatternflyThemeLink>
+        {` For example, the following static inline alert group includes one "success" alert and one "info" alert.`}
+      </p>
+    </Example>,
+  'Toast alert group': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport buttonStyles from '@patternfly/react-styles/css/components/Button/button';\n\nexport const AlertGroupToast: React.FunctionComponent = () => {\n  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);\n\n  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {\n    setAlerts((prevAlerts) => [{ title, variant, key }, ...prevAlerts]);\n  };\n\n  const removeAlert = (key: React.Key) => {\n    setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]);\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');\n\n  const getUniqueId = () => new Date().getTime();\n\n  const addSuccessAlert = () => {\n    addAlert('Toast success alert', 'success', getUniqueId());\n  };\n\n  const addDangerAlert = () => {\n    addAlert('Toast danger alert', 'danger', getUniqueId());\n  };\n\n  const addInfoAlert = () => {\n    addAlert('Toast info alert', 'info', getUniqueId());\n  };\n\n  return (\n    <Fragment>\n      <Flex gap={{ default: 'gapXs' }}>\n        <FlexItem>\n          <button onClick={addSuccessAlert} type=\"button\" className={btnClasses}>\n            Add toast success alert\n          </button>\n        </FlexItem>\n        <FlexItem>\n          <button onClick={addDangerAlert} type=\"button\" className={btnClasses}>\n            Add toast danger alert\n          </button>\n        </FlexItem>\n        <FlexItem>\n          <button onClick={addInfoAlert} type=\"button\" className={btnClasses}>\n            Add toast info alert\n          </button>\n        </FlexItem>\n      </Flex>\n      <AlertGroup hasAnimations isToast isLiveRegion>\n        {alerts.map(({ key, variant, title }) => (\n          <Alert\n            variant={AlertVariant[variant]}\n            title={title}\n            actionClose={\n              <AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() => removeAlert(key)}\n              />\n            }\n            key={key}\n          />\n        ))}\n      </AlertGroup>\n    </Fragment>\n  );\n};\n","title":"Toast alert group","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Toast alert groups are created by passing in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isToast`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isLiveRegion`}
+        </code>
+        {` properties.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Click the buttons in the example below to add alerts to a toast group.`}
+      </p>
+    </Example>,
+  'Toast alert group with overflow capture': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport buttonStyles from '@patternfly/react-styles/css/components/Button/button';\n\nexport const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {\n  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);\n  const [overflowMessage, setOverflowMessage] = useState<string>('');\n\n  const maxDisplayed = 4;\n\n  const getOverflowMessage = (alertsNumber: number) => {\n    const overflow = alertsNumber - maxDisplayed;\n    if (overflow > 0) {\n      return `View ${overflow} more alerts`;\n    }\n    return '';\n  };\n\n  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {\n    setAlerts((prevAlerts) => [{ title, variant, key }, ...prevAlerts]);\n    setOverflowMessage(getOverflowMessage(alerts.length + 1));\n  };\n\n  const removeAlert = (key: React.Key) => {\n    const newAlerts = alerts.filter((alert) => alert.key !== key);\n    setAlerts(newAlerts);\n    setOverflowMessage(getOverflowMessage(newAlerts.length));\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');\n\n  const getUniqueId = () => new Date().getTime();\n\n  const addSuccessAlert = () => {\n    addAlert('Toast success alert', 'success', getUniqueId());\n  };\n\n  const addDangerAlert = () => {\n    addAlert('Toast danger alert', 'danger', getUniqueId());\n  };\n\n  const addInfoAlert = () => {\n    addAlert('Toast info alert', 'info', getUniqueId());\n  };\n\n  const onOverflowClick = () => {\n    // eslint-disable-next-line no-console\n    console.log('Overflow message clicked');\n  };\n\n  return (\n    <Fragment>\n      <Flex gap={{ default: 'gapXs' }} style={{ marginBottom: '16px' }}>\n        <FlexItem>\n          <button onClick={addSuccessAlert} type=\"button\" className={btnClasses}>\n            Add toast success alert\n          </button>\n        </FlexItem>\n        <FlexItem>\n          <button onClick={addDangerAlert} type=\"button\" className={btnClasses}>\n            Add toast danger alert\n          </button>\n        </FlexItem>\n        <FlexItem>\n          <button onClick={addInfoAlert} type=\"button\" className={btnClasses}>\n            Add toast info alert\n          </button>\n        </FlexItem>\n      </Flex>\n      <AlertGroup\n        hasAnimations\n        isToast\n        isLiveRegion\n        onOverflowClick={onOverflowClick}\n        overflowMessage={overflowMessage}\n      >\n        {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (\n          <Alert\n            variant={AlertVariant[variant]}\n            title={title}\n            actionClose={\n              <AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() => removeAlert(key)}\n              />\n            }\n            key={key}\n          />\n        ))}\n      </AlertGroup>\n    </Fragment>\n  );\n};\n","title":"Toast alert group with overflow capture","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Users will see an overflow message once a predefined number of alerts are displayed. They will not see any alerts beyond the display limit, which must be explicitly set.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In the following example, an overflow message will appear when more than 4 alerts would be shown. When a 5th alert would appear, an overflow message is shown instead.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When an overflow message appears in an `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`AlertGroup`}
+        </code>
+        {` using the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isLiveRegion`}
+        </code>
+        {` property, the "view 1 more alert" text label will be announced, but the alert message will not.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Users navigating via keyboard or another assistive technology will need a way to navigate to and reveal hidden alerts before they disappear. Alternatively, there should be a place where notifications or alerts are collected to be viewed or read later.`}
+      </p>
+    </Example>,
+  'Asynchronous alert groups': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem,\n  useInterval\n} from '@patternfly/react-core';\nimport buttonStyles from '@patternfly/react-styles/css/components/Button/button';\n\nexport const AlertGroupAsync: React.FunctionComponent = () => {\n  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);\n  const [isRunning, setIsRunning] = useState(false);\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');\n\n  const getUniqueId = () => new Date().getTime();\n\n  const addAlert = () => {\n    setAlerts((prevAlerts) => [\n      {\n        title: `Async notification ${prevAlerts.length + 1} was added to the queue.`,\n        variant: 'danger',\n        key: getUniqueId()\n      },\n      ...prevAlerts\n    ]);\n  };\n\n  const removeAlert = (key: React.Key) => {\n    setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]);\n  };\n\n  const startAsyncAlerts = () => {\n    setIsRunning(true);\n  };\n\n  const stopAsyncAlerts = () => {\n    setIsRunning(false);\n  };\n\n  useInterval(addAlert, isRunning ? 4500 : null);\n\n  return (\n    <Fragment>\n      <InputGroup style={{ marginBottom: '16px' }}>\n        <InputGroupItem>\n          <button onClick={startAsyncAlerts} type=\"button\" className={btnClasses}>\n            Start async alerts\n          </button>\n        </InputGroupItem>\n        <InputGroupItem>\n          <button onClick={stopAsyncAlerts} type=\"button\" className={btnClasses}>\n            Stop async alerts\n          </button>\n        </InputGroupItem>\n      </InputGroup>\n      <AlertGroup hasAnimations isToast isLiveRegion aria-live=\"assertive\">\n        {alerts.map(({ title, variant, key }) => (\n          <Alert\n            variant={AlertVariant[variant]}\n            title={title}\n            key={key}\n            actionClose={\n              <AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() => removeAlert(key)}\n              />\n            }\n          />\n        ))}\n      </AlertGroup>\n    </Fragment>\n  );\n};\n","title":"Asynchronous alert groups","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The following example shows how alerts can be triggered by an asynchronous event in the application. You can customize how an alert will be announced to assistive technology by adjusting the value of the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-live`}
+        </code>
+        {` property. Click the "start async" alert button below and then click the buttons in the above toast examples to demonstrate how asynchronous events add alerts to a group. Click the "stop async alerts" button to halt this behavior.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`See the `}
+        
+        <PatternflyThemeLink {...{"to":"/components/alert/accessibility","className":""}}>
+          {`alert accessibility tab`}
+        </PatternflyThemeLink>
+        {` for more information on customizing this behavior.`}
+      </p>
+    </Example>,
+  'Dynamic alert groups': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport buttonStyles from '@patternfly/react-styles/css/components/Button/button';\n\nexport const AlertGroupSingularDynamic: React.FunctionComponent = () => {\n  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);\n\n  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {\n    setAlerts((prevAlerts) => [{ title, variant, key }, ...prevAlerts]);\n  };\n\n  const removeAlert = (key: React.Key) => {\n    setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]);\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');\n\n  const getUniqueId = () => new Date().getTime();\n\n  const addSuccessAlert = () => {\n    addAlert('Success alert', 'success', getUniqueId());\n  };\n\n  const addDangerAlert = () => {\n    addAlert('Danger alert', 'danger', getUniqueId());\n  };\n\n  const addInfoAlert = () => {\n    addAlert('Info alert', 'info', getUniqueId());\n  };\n\n  return (\n    <Fragment>\n      <Flex gap={{ default: 'gapXs' }} style={{ marginBottom: '16px' }}>\n        <FlexItem>\n          <button onClick={addSuccessAlert} type=\"button\" className={btnClasses}>\n            Add single success alert\n          </button>\n        </FlexItem>\n        <FlexItem>\n          <button onClick={addDangerAlert} type=\"button\" className={btnClasses}>\n            Add single danger alert\n          </button>\n        </FlexItem>\n        <FlexItem>\n          <button onClick={addInfoAlert} type=\"button\" className={btnClasses}>\n            Add single info alert\n          </button>\n        </FlexItem>\n      </Flex>\n      <AlertGroup hasAnimations isLiveRegion>\n        {alerts.map(({ title, variant, key }) => (\n          <Alert\n            isInline\n            variant={AlertVariant[variant]}\n            title={title}\n            key={key}\n            actionClose={\n              <AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() => removeAlert(key)}\n              />\n            }\n          />\n        ))}\n      </AlertGroup>\n    </Fragment>\n  );\n};\n","title":"Dynamic alert groups","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Click the buttons in the example below to add dynamic alerts to a group.`}
+      </p>
+    </Example>,
+  'Dynamic alert group with overflow message': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport buttonStyles from '@patternfly/react-styles/css/components/Button/button';\n\nexport const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () => {\n  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);\n  const [overflowMessage, setOverflowMessage] = useState<string>('');\n\n  const maxDisplayed = 4;\n\n  const getOverflowMessage = (alertsNumber: number) => {\n    const overflow = alertsNumber - maxDisplayed;\n    if (overflow > 0) {\n      return `View ${overflow} more alerts`;\n    }\n    return '';\n  };\n\n  const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {\n    setAlerts((prevAlerts) => [{ title, variant, key }, ...prevAlerts]);\n    setOverflowMessage(getOverflowMessage(alerts.length + 1));\n  };\n\n  const removeAlert = (key: React.Key) => {\n    const newAlerts = alerts.filter((alert) => alert.key !== key);\n    setAlerts(newAlerts);\n    setOverflowMessage(getOverflowMessage(newAlerts.length));\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');\n\n  const getUniqueId = () => new Date().getTime();\n\n  const addSuccessAlert = () => {\n    addAlert('Success alert', 'success', getUniqueId());\n  };\n\n  const addDangerAlert = () => {\n    addAlert('Danger alert', 'danger', getUniqueId());\n  };\n\n  const addInfoAlert = () => {\n    addAlert('Info alert', 'info', getUniqueId());\n  };\n\n  const onOverflowClick = () => {\n    // eslint-disable-next-line no-console\n    console.log('Overflow message clicked');\n  };\n\n  return (\n    <Fragment>\n      <Flex gap={{ default: 'gapXs' }} style={{ marginBottom: '16px' }}>\n        <FlexItem>\n          <button onClick={addSuccessAlert} type=\"button\" className={btnClasses}>\n            Add single success alert\n          </button>\n        </FlexItem>\n        <FlexItem>\n          <button onClick={addDangerAlert} type=\"button\" className={btnClasses}>\n            Add single danger alert\n          </button>\n        </FlexItem>\n        <FlexItem>\n          <button onClick={addInfoAlert} type=\"button\" className={btnClasses}>\n            Add single info alert\n          </button>\n        </FlexItem>\n      </Flex>\n      <AlertGroup hasAnimations isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>\n        {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (\n          <Alert\n            isInline\n            variant={AlertVariant[variant]}\n            title={title}\n            actionClose={\n              <AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() => removeAlert(key)}\n              />\n            }\n            key={key}\n          />\n        ))}\n      </AlertGroup>\n    </Fragment>\n  );\n};\n","title":"Dynamic alert group with overflow message","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In the following example, there can be a maximum of 4 alerts shown at once.`}
+      </p>
+    </Example>,
+  'Multiple dynamic alert groups': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport buttonStyles from '@patternfly/react-styles/css/components/Button/button';\n\nexport const AlertGroupMultipleDynamic: React.FunctionComponent = () => {\n  const [alerts, setAlerts] = useState<Partial<AlertProps>[]>([]);\n\n  const addAlerts = (incomingAlerts: Partial<AlertProps>[]) => {\n    setAlerts((prevAlerts) => [...incomingAlerts, ...prevAlerts]);\n  };\n\n  const removeAlert = (key: React.Key) => {\n    setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]);\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' ');\n\n  const getUniqueId = () => String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now();\n\n  const addAlertCollection = () => {\n    addAlerts([\n      { title: 'First alert notification.', variant: 'success', key: getUniqueId() },\n      { title: 'Second alert notification.', variant: 'warning', key: getUniqueId() },\n      { title: 'Third alert notification.', variant: 'danger', key: getUniqueId() }\n    ]);\n  };\n\n  return (\n    <Fragment>\n      <Flex gap={{ default: 'gapXs' }}>\n        <FlexItem>\n          <button onClick={addAlertCollection} type=\"button\" className={btnClasses}>\n            Add alert collection\n          </button>\n        </FlexItem>\n      </Flex>\n      <AlertGroup hasAnimations isToast isLiveRegion>\n        {alerts.map(({ title, variant, key }) => (\n          <Alert\n            variant={AlertVariant[variant]}\n            title={title}\n            key={key}\n            actionClose={\n              <AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() => removeAlert(key)}\n              />\n            }\n          />\n        ))}\n      </AlertGroup>\n    </Fragment>\n  );\n};\n","title":"Multiple dynamic alert groups","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You may add multiple alerts to an alert group at once. Click the "add alert collection" button in the example below to add a batch of 3 toast alerts to a group.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Micro animations have been added for `}
+      <code {...{"className":"ws-code "}}>
+        {`<Alert>`}
+      </code>
+      {` components within an `}
+      <code {...{"className":"ws-code "}}>
+        {`<AlertGroup>`}
+      </code>
+      {`. By default, you must opt into animations, since they can require updates to tests. To enable or disable animations as needed, use the `}
+      <code {...{"className":"ws-code "}}>
+        {`hasAnimations`}
+      </code>
+      {` property. With animations enabled, we recommend you ensure that dynamically-added alerts are prepended to a list of alerts, rather than appended to the end of it.`}
+    </p>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Micro animations are turned on for all examples and demos where alerts are dynamically added.`}
+    </p>
+    <AutoLinkHeader {...{"id":"alert-examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Alert examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Alert variants"])}
+    {React.createElement(pageData.examples["Alert variations"])}
+    {React.createElement(pageData.examples["Alert timeout"])}
+    {React.createElement(pageData.examples["Expandable alerts"])}
+    {React.createElement(pageData.examples["Truncated alerts"])}
+    {React.createElement(pageData.examples["Custom icons"])}
+    {React.createElement(pageData.examples["Inline alerts variants"])}
+    {React.createElement(pageData.examples["Inline alert variations"])}
+    {React.createElement(pageData.examples["Plain inline alert variants"])}
+    {React.createElement(pageData.examples["Plain inline alert variations"])}
+    {React.createElement(pageData.examples["Static live region alerts"])}
+    {React.createElement(pageData.examples["Dynamic live region alerts"])}
+    {React.createElement(pageData.examples["Asynchronous live region alerts"])}
+    <AutoLinkHeader {...{"id":"alert-group-examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Alert group examples`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`An alert group stacks and positions 2 or more alerts in a live region, either in a layer over the main content of a page or inline with the page content. Alert groups should always rank alerts by age, stacking new alerts on top of old ones as they surface.`}
+    </p>
+    <AutoLinkHeader {...{"id":"alert-group-variants","headingLevel":"h3","className":"ws-title ws-h3"}}>
+      {`Alert group variants`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Alert groups can be one of the following variants:`}
+    </p>
+    <table {...{"className":"ws-table  pf-v6-c-table pf-m-grid-lg pf-m-compact","role":"grid"}}>
+      <thead {...{"className":"pf-v6-c-table__thead"}}>
+        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
+          <th {...{"className":"undefined pf-v6-c-table__th pf-m-wrap","role":"columnheader","scope":"col"}}>
+            <div {...{"className":""}}>
+              {`Variant`}
+            </div>
+          </th>
+          <th {...{"className":"undefined pf-v6-c-table__th pf-m-wrap","role":"columnheader","scope":"col"}}>
+            <div {...{"className":""}}>
+              {`Description`}
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody {...{"role":"rowgroup","className":"pf-v6-c-table__tbody"}}>
+        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
+          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
+            <div {...{"className":""}}>
+              {`Static inline`}
+            </div>
+          </td>
+          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
+            <div {...{"className":""}}>
+              {`Static inline alert groups contain alerts that appear when the page loads, and are seen within the normal page content flow. These groups should not contain alerts that will dynamically appear or update.`}
+            </div>
+          </td>
+        </tr>
+        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
+          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
+            <div {...{"className":""}}>
+              {`Toast`}
+            </div>
+          </td>
+          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
+            <div {...{"className":""}}>
+              {`Toast alert groups contain alerts that typically appear in response to an asynchronous event or user action. These groups are positioned on top of other content at the top right of the page.`}
+            </div>
+          </td>
+        </tr>
+        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
+          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
+            <div {...{"className":""}}>
+              {`Dynamic`}
+            </div>
+          </td>
+          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
+            <div {...{"className":""}}>
+              {`Dynamic alert groups contain alerts that typically appear in response to a user action, and are seen within the normal page content flow.`}
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Dynamic alerts that are generated after the page initially loads must be appended to either a toast or dynamic `}
+      <code {...{"className":"ws-code "}}>
+        {`AlertGroup`}
+      </code>
+      {`, both of which must use the `}
+      <code {...{"className":"ws-code "}}>
+        {`isLiveRegion`}
+      </code>
+      {` property. New alerts appended to a toast or dynamic group will be announced by assistive technologies the moment the change happens. For information about customizing this announcement, read the `}
+      <PatternflyThemeLink {...{"to":"/components/alert/accessibility#aria-atomic-and-aria-relevant","className":""}}>
+        {`aria-atomic and aria-relevant`}
+      </PatternflyThemeLink>
+      {` section of the alert accessibility documentation.`}
+    </p>
+    {React.createElement(pageData.examples["Static inline alert group"])}
+    {React.createElement(pageData.examples["Toast alert group"])}
+    {React.createElement(pageData.examples["Toast alert group with overflow capture"])}
+    {React.createElement(pageData.examples["Asynchronous alert groups"])}
+    {React.createElement(pageData.examples["Dynamic alert groups"])}
+    {React.createElement(pageData.examples["Dynamic alert group with overflow message"])}
+    {React.createElement(pageData.examples["Multiple dynamic alert groups"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsAlertReactDocs';
+Component.pageData = pageData;
+
+export default Component;