{"data":{"allSitePage":{"nodes":[{"path":"/ActionList","context":{"frontmatter":{"title":"ActionList","status":"Beta","description":"An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including ActionMenu and SelectPanel.","componentId":"action_list"}}},{"path":"/ActionMenu","context":{"frontmatter":{"title":"ActionMenu","status":"Beta","description":"An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button.","componentId":"action_menu"}}},{"path":"/AnchoredOverlay","context":{"frontmatter":{"title":"AnchoredOverlay","status":"Alpha","description":null,"componentId":"anchored_overlay"}}},{"path":"/Autocomplete","context":{"frontmatter":{"title":"Autocomplete","status":"Alpha","description":"Used to render a text input that allows a user to quickly filter through a list of options to pick one or more values.","componentId":"autocomplete"}}},{"path":"/Avatar","context":{"frontmatter":{"title":"Avatar","status":"Alpha","description":null,"componentId":"avatar"}}},{"path":"/AvatarPair","context":{"frontmatter":{"title":"AvatarPair","status":"Alpha","description":null,"componentId":"avatar_pair"}}},{"path":"/AvatarStack","context":{"frontmatter":{"title":"AvatarStack","status":"Alpha","description":"Use an avatar stack to display two or more avatars in an inline stack.","componentId":"avatar_stack"}}},{"path":"/Box","context":{"frontmatter":{"title":"Box","status":"Beta","description":"A low-level utility component that accepts styled system props to enable custom theme-aware styling","componentId":"box"}}},{"path":"/BranchName","context":{"frontmatter":{"title":"BranchName","status":"Alpha","description":null,"componentId":"branch_name"}}},{"path":"/Breadcrumbs","context":{"frontmatter":{"title":"Breadcrumbs","status":"Alpha","description":"Use breadcrumbs to show navigational context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages.","componentId":"breadcrumbs"}}},{"path":"/Button","context":{"frontmatter":{"title":"Button","status":"Alpha","description":"Use button for the main actions on a page or form.","componentId":"button"}}},{"path":"/ButtonGroup","context":{"frontmatter":{"title":"ButtonGroup","status":"Alpha","description":null,"componentId":"button_group"}}},{"path":"/Checkbox","context":{"frontmatter":{"title":"Checkbox","status":"Alpha","description":"Use checkboxes to toggle between checked and unchecked states in a list or as a standalone form field","componentId":"checkbox"}}},{"path":"/CheckboxGroup","context":{"frontmatter":{"title":"CheckboxGroup","status":"Alpha","description":"Renders a set of checkboxes to let users make one or more selections from a short list of options","componentId":"checkbox_group"}}},{"path":"/CircleBadge","context":{"frontmatter":{"title":"CircleBadge","status":"Alpha","description":null,"componentId":"circle_badge"}}},{"path":"/CircleOcticon","context":{"frontmatter":{"title":"CircleOcticon","status":"Alpha","description":null,"componentId":"circle_octicon"}}},{"path":"/CounterLabel","context":{"frontmatter":{"title":"CounterLabel","status":"Alpha","description":"Use the CounterLabel component to add a count to navigational elements and buttons.","componentId":"counter_label"}}},{"path":"/Details","context":{"frontmatter":{"title":"Details","status":"Alpha","description":null,"componentId":"details"}}},{"path":"/Dialog","context":{"frontmatter":{"title":"Dialog","status":"Alpha","description":null,"componentId":null}}},{"path":"/FilterList","context":{"frontmatter":{"title":"FilterList","status":"Alpha","description":null,"componentId":"filter_list"}}},{"path":"/FilteredSearch","context":{"frontmatter":{"title":"FilteredSearch","status":"Alpha","description":null,"componentId":"filtered_search"}}},{"path":"/Flash","context":{"frontmatter":{"title":"Flash","status":"Alpha","description":null,"componentId":"flash"}}},{"path":"/FormControl","context":{"frontmatter":{"title":"FormControl","status":"Alpha","description":"Renders a labelled input and, optionally, associated validation text and/or hint text.","componentId":"form_control"}}},{"path":"/Header","context":{"frontmatter":{"title":"Header","status":"Alpha","description":"Use the Header component to create a header that has all of its items aligned vertically with consistent horizontal spacing","componentId":"header"}}},{"path":"/Heading","context":{"frontmatter":{"title":"Heading","status":"Alpha","description":"Use Heading to structure your content and provide an accessible experience for users of assistive technologies.","componentId":"heading"}}},{"path":"/IconButton","context":{"frontmatter":{"title":"IconButton","status":"Alpha","description":"An accessible button component with no text and only icon.","componentId":"icon_button"}}},{"path":"/Label","context":{"frontmatter":{"title":"Label","status":"Alpha","description":"Use Label components to add contextual metadata to a design.","componentId":"label"}}},{"path":"/LabelGroup","context":{"frontmatter":{"title":"LabelGroup","status":"Alpha","description":"Use LabelGroup components to add commonly used margins and other layout constraints to groups of Labels","componentId":"label_group"}}},{"path":"/Link","context":{"frontmatter":{"title":"Link","status":"Alpha","description":null,"componentId":"link"}}},{"path":"/NavList","context":{"frontmatter":{"title":"NavList","status":"Draft","description":"Use nav list to render a vertical list of navigation links.","componentId":null}}},{"path":"/Overlay","context":{"frontmatter":{"title":"Overlay","status":"Alpha","description":"Use Overlay to provide a flexible floating surface for displaying transient content such as menus, selection options, dialogs, and more.","componentId":"overlay"}}},{"path":"/PageLayout","context":{"frontmatter":{"title":"PageLayout","status":"Alpha","description":null,"componentId":"page_layout"}}},{"path":"/Pagehead","context":{"frontmatter":{"title":"Pagehead","status":"Alpha","description":"Use Pagehead to provide a clear, separated page title.","componentId":"pagehead"}}},{"path":"/Pagination","context":{"frontmatter":{"title":"Pagination","status":"Alpha","description":"Use Pagination to display a sequence of links that allow navigation to discrete, related pages.","componentId":"pagination"}}},{"path":"/PointerBox","context":{"frontmatter":{"title":"PointerBox","status":"Alpha","description":"A customisable, bordered Box with a caret pointer","componentId":"pointer_box"}}},{"path":"/Popover","context":{"frontmatter":{"title":"Popover","status":"Alpha","description":"Use Popovers to bring attention to specific user interface elements and suggest an action or to guide users through a new experience","componentId":"popover"}}},{"path":"/Portal","context":{"frontmatter":{"title":"Portal","status":"Alpha","description":"Portals allow you to create a separation between the logical React component hierarchy and the physical DOM.","componentId":"portal"}}},{"path":"/ProgressBar","context":{"frontmatter":{"title":"ProgressBar","status":"Alpha","description":null,"componentId":"progress_bar"}}},{"path":"/Radio","context":{"frontmatter":{"title":"Radio","status":"Alpha","description":"Use radios when a user needs to select one option from a list","componentId":"radio"}}},{"path":"/RadioGroup","context":{"frontmatter":{"title":"RadioGroup","status":"Alpha","description":"Renders a set of radio inputs to let users make a single selection from a short list of options","componentId":"radio_group"}}},{"path":"/SegmentedControl","context":{"frontmatter":{"title":"SegmentedControl","status":"Draft","description":"Use a segmented control to let users select an option from a short list and immediately apply the selection","componentId":null}}},{"path":"/Select","context":{"frontmatter":{"title":"Select","status":"Alpha","description":"Use a select input when a user needs to select one option from a long list","componentId":"select"}}},{"path":"/SelectPanel","context":{"frontmatter":{"title":"SelectPanel","status":"Alpha","description":null,"componentId":"select_panel"}}},{"path":"/SideNav","context":{"frontmatter":{"title":"SideNav","status":"Alpha","description":null,"componentId":"side_nav"}}},{"path":"/Spinner","context":{"frontmatter":{"title":"Spinner","status":"Alpha","description":"Use spinners to let users know that content is being loaded.","componentId":"spinner"}}},{"path":"/StateLabel","context":{"frontmatter":{"title":"StateLabel","status":"Alpha","description":null,"componentId":"state_label"}}},{"path":"/StyledOcticon","context":{"frontmatter":{"title":"StyledOcticon","status":"Alpha","description":"Use StyledOcticon to render an Octicon as a component.","componentId":"styled_octicon"}}},{"path":"/SubNav","context":{"frontmatter":{"title":"SubNav","status":"Alpha","description":null,"componentId":"sub_nav"}}},{"path":"/TabNav","context":{"frontmatter":{"title":"TabNav","status":"Alpha","description":null,"componentId":"tab_nav"}}},{"path":"/Text","context":{"frontmatter":{"title":"Text","status":"Alpha","description":null,"componentId":"text"}}},{"path":"/TextInput","context":{"frontmatter":{"title":"TextInput","status":"Alpha","description":null,"componentId":"text_input"}}},{"path":"/TextInputWithTokens","context":{"frontmatter":{"title":"TextInputWithTokens","status":"Alpha","description":"Used to show multiple values in one field","componentId":"text_input_with_tokens"}}},{"path":"/Textarea","context":{"frontmatter":{"title":"Textarea","status":"Alpha","description":"Use Textarea for multi-line text input form fields","componentId":"textarea"}}},{"path":"/Timeline","context":{"frontmatter":{"title":"Timeline","status":"Alpha","description":null,"componentId":"timeline"}}},{"path":"/ToggleSwitch","context":{"frontmatter":{"title":"ToggleSwitch","status":"Alpha","description":"Toggles a setting on or off, and immediately saves the change","componentId":"toggle_switch"}}},{"path":"/Token","context":{"frontmatter":{"title":"Token","status":"Alpha","description":"A Token represents a piece of data. They are typically used to show a collection of related attributes.","componentId":"token"}}},{"path":"/Tooltip","context":{"frontmatter":{"title":"Tooltip","status":"Alpha","description":null,"componentId":"tooltip"}}},{"path":"/Truncate","context":{"frontmatter":{"title":"Truncate","status":"Alpha","description":null,"componentId":"truncate"}}},{"path":"/UnderlineNav","context":{"frontmatter":{"title":"UnderlineNav","status":"Alpha","description":null,"componentId":"underline_nav"}}},{"path":"/anchoredPosition","context":{"frontmatter":{"title":"Anchored Position Behavior","status":null,"description":null,"componentId":null}}},{"path":"/core-concepts","context":{"frontmatter":{"title":"Core Concepts","status":null,"description":null,"componentId":null}}},{"path":"/focusTrap","context":{"frontmatter":{"title":"Focus Trap Behavior","status":null,"description":null,"componentId":null}}},{"path":"/focusZone","context":{"frontmatter":{"title":"Focus Zone Behavior","status":null,"description":null,"componentId":null}}},{"path":"/getting-started","context":{"frontmatter":{"title":"Getting started","status":null,"description":null,"componentId":null}}},{"path":"/","context":{"frontmatter":{"title":"Getting started","status":null,"description":null,"componentId":null}}},{"path":"/linting","context":{"frontmatter":{"title":"Linting","status":null,"description":"Primer React offers an ESLint plugin to enforce best practices and fix common problems.","componentId":null}}},{"path":"/overriding-styles","context":{"frontmatter":{"title":"Overriding styles with the sx prop","status":null,"description":null,"componentId":null}}},{"path":"/philosophy","context":{"frontmatter":{"title":"Primer React Philosophy","status":null,"description":null,"componentId":null}}},{"path":"/primer-theme","context":{"frontmatter":{"title":"Primer Theme","status":null,"description":null,"componentId":null}}},{"path":"/ssr","context":{"frontmatter":{"title":"Server-side rendering with Primer React","status":null,"description":null,"componentId":null}}},{"path":"/status","context":{"frontmatter":{"title":"Component status","status":null,"description":"Check the current status of Primer React components","componentId":null}}},{"path":"/system-props","context":{"frontmatter":{"title":"System Props","status":null,"description":null,"componentId":null}}},{"path":"/theme-reference","context":{"frontmatter":{"title":"Theme reference","status":null,"description":"The default theme object for Primer React components","componentId":null}}},{"path":"/theming","context":{"frontmatter":{"title":"Theming","status":null,"description":"Theming in Primer React is made possible by a theme object that defines your application's colors, spacing, fonts, and more.","componentId":null}}},{"path":"/useOnEscapePress","context":{"frontmatter":{"title":"useOnEscapePress","status":null,"description":null,"componentId":null}}},{"path":"/useOnOutsideClick","context":{"frontmatter":{"title":"useOnOutsideClick","status":null,"description":null,"componentId":null}}},{"path":"/useOpenAndCloseFocus","context":{"frontmatter":{"title":"useOpenAndCloseFocus","status":null,"description":null,"componentId":null}}},{"path":"/useOverlay","context":{"frontmatter":{"title":"useOverlay","status":null,"description":null,"componentId":null}}},{"path":"/useSafeTimeout","context":{"frontmatter":{"title":"useSafeTimeout","status":null,"description":null,"componentId":null}}},{"path":"/deprecated/ActionList","context":{"frontmatter":{"title":"ActionList (legacy)","status":"Deprecated","description":null,"componentId":null}}},{"path":"/deprecated/ActionMenu","context":{"frontmatter":{"title":"ActionMenu (legacy)","status":"Deprecated","description":null,"componentId":null}}},{"path":"/deprecated/BorderBox","context":{"frontmatter":{"title":"BorderBox","status":"Deprecated","description":null,"componentId":null}}},{"path":"/deprecated/Buttons","context":{"frontmatter":{"title":"Button (legacy)","status":"deprecated","description":null,"componentId":null}}},{"path":"/deprecated/ChoiceFieldset","context":{"frontmatter":{"title":"ChoiceFieldset","status":"Deprecated","description":null,"componentId":null}}},{"path":"/deprecated/ChoiceInputField","context":{"frontmatter":{"title":"ChoiceInputField","status":"Deprecated","description":"The ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional  hint text.","componentId":null}}},{"path":"/deprecated/Dropdown","context":{"frontmatter":{"title":"Dropdown","status":"Deprecated","description":null,"componentId":null}}},{"path":"/deprecated/DropdownMenu","context":{"frontmatter":{"title":"DropdownMenu","status":"Deprecated","description":null,"componentId":null}}},{"path":"/deprecated/Flex","context":{"frontmatter":{"title":"Flex","status":"Deprecated","description":null,"componentId":null}}},{"path":"/deprecated/FormGroup","context":{"frontmatter":{"title":"FormGroup","status":"Deprecated","description":null,"componentId":null}}},{"path":"/deprecated/Grid","context":{"frontmatter":{"title":"Grid","status":"Deprecated","description":null,"componentId":null}}},{"path":"/deprecated/InputField","context":{"frontmatter":{"title":"InputField","status":"Deprecated","description":"The InputField component is used to render a labelled text input and, optionally, associated validation text and hint text.","componentId":null}}},{"path":"/deprecated/Label","context":{"frontmatter":{"title":"Label (legacy)","status":"Deprecated","description":"Use Label components to add contextual metadata to a design.","componentId":"legacy_label"}}},{"path":"/deprecated/Position","context":{"frontmatter":{"title":"Position","status":"Deprecated","description":null,"componentId":null}}},{"path":"/deprecated/SelectMenu","context":{"frontmatter":{"title":"SelectMenu","status":"Deprecated","description":null,"componentId":null}}},{"path":"/drafts/Dialog","context":{"frontmatter":{"title":"Dialog v2","status":"Draft","description":null,"componentId":"dialog"}}}]}}}