{
    "componentChunkName": "component---src-layouts-react-component-layout-tsx",
    "path": "/components/action-list/react",
    "result": {"data":{"primerReactVersion":{"version":"36.5.0"},"sitePage":{"path":"/components/action-list","context":{"frontmatter":{"title":"Action list","description":"Action list is a vertical list of interactive actions or options. It's composed of items presented in a consistent. single-column format, with room for icons, descriptions, side information, and other rich visuals.","reactId":"action_list","railsIds":["Primer::Alpha::ActionList"],"figmaId":"action_list","cssId":null}}},"reactComponent":{"name":"ActionList","status":"beta","a11yReviewed":false,"stories":[{"id":"components-actionlist--default","code":"() => (\n  <ActionList>\n    <ActionList.Item>Copy link</ActionList.Item>\n    <ActionList.Item>Quote reply</ActionList.Item>\n    <ActionList.Item>Edit comment</ActionList.Item>\n  </ActionList>\n)"}],"props":[{"name":"children","type":"ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]","description":"","defaultValue":"","required":true,"deprecated":null},{"name":"variant","type":"'inset' | 'full'","description":"`inset` children are offset (vertically and horizontally) from list edges. `full` children are flush (vertically and horizontally) with list edges","defaultValue":"'inset'","required":null,"deprecated":null},{"name":"selectionVariant","type":"'single' | 'multiple'","description":"Whether multiple items or a single item can be selected.","defaultValue":"","required":null,"deprecated":null},{"name":"showDivider","type":"boolean","description":"Display a divider above each item in this list when it does not follow a header or divider.","defaultValue":"false","required":null,"deprecated":null},{"name":"role","type":"AriaRole","description":"ARIA role describing the function of the list. `listbox` and `menu` are a common values.","defaultValue":"","required":null,"deprecated":null},{"name":"sx","type":"SystemStyleObject","description":null,"defaultValue":null,"required":null,"deprecated":null}],"subcomponents":[{"name":"ActionList.Item","props":[{"name":"children","type":"React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual","description":"","defaultValue":"","required":true,"deprecated":null},{"name":"variant","type":"'default' | 'danger'","description":"`danger` indicates that the item is destructive.","defaultValue":"'default'","required":null,"deprecated":null},{"name":"onSelect","type":"(event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void","description":"Callback that is called when the item is selected using either the mouse or keyboard. `event.preventDefault()` will prevent a menu from closing when within an `<ActionMenu />`. This is not called for disabled or inactive items.","defaultValue":"","required":null,"deprecated":null},{"name":"selected","type":"boolean","description":"Indicate whether the item is selected. Only applies to items that can be selected.","defaultValue":"false","required":null,"deprecated":null},{"name":"active","type":"boolean","description":"Indicate whether the item is active. There should never be more than one active item.","defaultValue":"false","required":null,"deprecated":null},{"name":"disabled","type":"boolean","description":"Items that are disabled can not be clicked, selected, or navigated to.","defaultValue":"false","required":null,"deprecated":null},{"name":"inactiveText","type":"string","description":"Text describing why the item is inactive. This may be used when an item's usual functionality is unavailable due to a system error such as a database outage. \nIf there is a leading visual, the alert icon will replace the leading visual. \n If there is a trailing visual, it will replace the trailing visual.\n If there is no visual passed, it will be shown in the trailing visual slot to preserve left alignment of item content. \nText will appear in a tooltip triggered by the alert icon in ActionList items, but text will appear below the description or title on ActionMenu items.","defaultValue":"","required":null,"deprecated":null},{"name":"role","type":"AriaRole","description":"ARIA role describing the function of the item. `option` is a common value.","defaultValue":"","required":null,"deprecated":null},{"name":"sx","type":"SystemStyleObject","description":null,"defaultValue":null,"required":null,"deprecated":null}]},{"name":"ActionList.LinkItem","props":[{"name":"children","type":"React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual","description":"","defaultValue":"","required":true,"deprecated":null},{"name":"active","type":"boolean","description":"Indicate whether the item is active. There should never be more than one active item.","defaultValue":"false","required":null,"deprecated":null},{"name":"ref","type":"React.RefObject<HTMLAnchorElement>","description":null,"defaultValue":null,"required":null,"deprecated":null},{"name":"as","type":"React.ElementType","description":null,"defaultValue":"\"a\"","required":null,"deprecated":null},{"name":"sx","type":"SystemStyleObject","description":null,"defaultValue":null,"required":null,"deprecated":null}]},{"name":"ActionList.LeadingVisual","props":[{"name":"children","type":"React.ReactNode","description":"Icon (or similar) positioned before item text.","defaultValue":"","required":true,"deprecated":null},{"name":"sx","type":"SystemStyleObject","description":null,"defaultValue":null,"required":null,"deprecated":null}]},{"name":"ActionList.TrailingVisual","props":[{"name":"children","type":"React.ReactNode","description":"Visual positioned after item text.","defaultValue":"","required":true,"deprecated":null},{"name":"sx","type":"SystemStyleObject","description":null,"defaultValue":null,"required":null,"deprecated":null}]},{"name":"ActionList.Description","props":[{"name":"children","type":"React.ReactNode","description":"","defaultValue":"","required":true,"deprecated":null},{"name":"variant","type":"'inline' | 'block'","description":"`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text.","defaultValue":"'inline'","required":null,"deprecated":null},{"name":"sx","type":"SystemStyleObject","description":null,"defaultValue":null,"required":null,"deprecated":null}]},{"name":"ActionList.GroupHeading","props":[{"name":"children","type":"React.ReactNode","description":"Use to give a heading to the groups","defaultValue":"","required":true,"deprecated":null},{"name":"variant","type":"'filled' | 'subtle'","description":"`filled` style has a background color and top and bottom borders. Subtle style has no background or borders.","defaultValue":"'subtle'","required":null,"deprecated":null},{"name":"as","type":"h1 | h2 | h3 | h4 | h5 | h6","description":"The level of the heading and it is only required (enforce by runtime warning) for lists. (i.e. not required for ActionMenu or listbox roles)","defaultValue":"h3","required":false,"deprecated":null},{"name":"sx","type":"SystemStyleObject","description":null,"defaultValue":null,"required":null,"deprecated":null}]},{"name":"ActionList.Group","props":[{"name":"children","type":"ActionList.Item[] | ActionList.LinkItem[]","description":"","defaultValue":"","required":true,"deprecated":null},{"name":"title","type":"string","description":"Title of the group.","defaultValue":"","required":null,"deprecated":null},{"name":"auxiliaryText","type":"string","description":"Secondary text that provides additional information about the group.","defaultValue":"","required":null,"deprecated":null},{"name":"variant","type":"'filled' | 'subtle'","description":"`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text.","defaultValue":"'subtle'","required":null,"deprecated":null},{"name":"selectionVariant","type":"'single' | 'multiple' | false","description":"Set `selectionVariant` at the group level.","defaultValue":"","required":null,"deprecated":null},{"name":"role","type":"AriaRole","description":"ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values.","defaultValue":"","required":null,"deprecated":null},{"name":"sx","type":"SystemStyleObject","description":null,"defaultValue":null,"required":null,"deprecated":null}]}]}},"pageContext":{"componentId":"action_list","parentPath":"/components/action-list"}},
    "staticQueryHashes": ["1056354862","2102389209","2745756513","2790671566","2939673985","3235046957","3907230164"]}