{
  "$schema": "./metadata.schema.json",
  "components": {
    "action_bar": {
      "id": "action_bar",
      "displayName": "Action bar",
      "description": "Use action bar to contain a collection of horizontally aligned icon buttons."
    },
    "action_list": {
      "id": "action_list",
      "displayName": "Action list",
      "description": "Use action list to list items that can be activated or selected. ActionList is the base component for many menu-type components, including ActionMenu and SelectPanel."
    },
    "action_list_divider": {
      "id": "action_list_divider",
      "displayName": "Action list divider",
      "description": "Use action list divider to separate sections within an action list."
    },
    "action_list_heading": {
      "id": "action_list_heading",
      "displayName": "Action list heading",
      "description": "Use action list heading to describe each sub list within an action list."
    },
    "action_menu": {
      "id": "action_menu",
      "displayName": "Action menu",
      "description": "Use action menu to create a menu of actions that expands through a trigger button."
    },
    "anchored_overlay": {
      "id": "anchored_overlay",
      "displayName": "Anchored Overlay",
      "description": "Use anchored overlay to provide an anchor that will open a floating overlay positioned relative to the anchor. The overlay can be opened and navigated using keyboard or mouse."
    },
    "auto_complete": {
      "id": "auto_complete",
      "displayName": "Auto complete",
      "description": "Use auto complete to render a text input that allows a user to quickly filter through a list of options to pick one or more values."
    },
    "autocomplete": {
      "id": "autocomplete",
      "displayName": "Autocomplete",
      "description": "Use auto complete to render a text input that allows a user to quickly filter through a list of options to pick one or more values."
    },
    "auto_complete_item": {
      "id": "auto_complete_item",
      "displayName": "Auto complete item",
      "description": "Use auto complete item to list the results of an auto-completed search."
    },
    "avatar": {
      "id": "avatar",
      "displayName": "Avatar",
      "description": "Use avatars to represent users or organizations.",
      "implementations": {
        "react": "https://primer.style/components/Avatar",
        "viewComponent": "https://primer.style/view-components/components/avatar",
        "css": "https://primer.style/css/components/avatars"
      }
    },
    "avatar_pair": {
      "id": "avatar_pair",
      "displayName": "Avatar pair",
      "description": "Use avatar pair to display two avatars when one is secondary to the other."
    },
    "avatar_stack": {
      "id": "avatar_stack",
      "displayName": "Avatar stack",
      "description": "Use an avatar stack to display two or more avatars in an inline stack"
    },
    "banner": {
      "id": "banner",
      "displayName": "Banner",
      "description": "Use banner to highlight important information."
    },
    "base_button": {
      "id": "base_button",
      "displayName": "Base button",
      "description": "Use base button to render an unstyled <button> tag that can be customized."
    },
    "blankslate": {
      "id": "blankslate",
      "displayName": "Blank slate",
      "description": "Use blank slate when there is a lack of content within a page or section."
    },
    "border_box": {
      "id": "border_box",
      "displayName": "Border box",
      "description": "Use border box to render a Box component with a border."
    },
    "border_box_header": {
      "id": "border_box_header",
      "displayName": "Border box header",
      "description": "Use border box header inside a border box component to render its header slot."
    },
    "box": {
      "id": "box",
      "displayName": "Box",
      "description": "Use box as a low-level utility component that accepts styled system props to enable custom theme-aware styling."
    },
    "branch_name": {
      "id": "branch_name",
      "displayName": "Branch name",
      "description": "Use BranchName as a label-type component rendered as an <a> tag by default with monospace font."
    },
    "breadcrumbs": {
      "id": "breadcrumbs",
      "displayName": "Breadcrumbs",
      "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.",
      "implementations": {
        "react": "https://primer.style/react/Breadcrumbs",
        "viewComponent": "https://primer.style/view-components/components/beta/breadcrumbs",
        "css": "https://primer.style/css/components/breadcrumb"
      }
    },
    "button": {
      "id": "button",
      "displayName": "Button",
      "description": "Use button for the main actions on a page or form."
    },
    "button_group": {
      "id": "button_group",
      "displayName": "Button group",
      "description": "Use button group to render a series of buttons."
    },
    "button_marketing": {
      "id": "button_marketing",
      "displayName": "Button marketing",
      "description": "Use button marketing for actions (e.g. in forms)."
    },
    "checkbox": {
      "id": "checkbox",
      "displayName": "Checkbox",
      "description": "Use checkboxes to toggle between checked and unchecked states in a list or as a standalone form field."
    },
    "checkbox_group": {
      "id": "checkbox_group",
      "displayName": "Checkbox group",
      "description": "Use checkbox group to render a set of checkboxes to let users make one or more selections from a short list of options."
    },
    "circle_badge": {
      "id": "circle_badge",
      "displayName": "Circle badge",
      "description": "Use circle badge to visually connect logos of third-party services like in the marketplace."
    },
    "circle_octicon": {
      "id": "circle_octicon",
      "displayName": "Circle octicon",
      "description": "Use circle octicon to render any Octicon with a circle background. CircleOcticons are most commonly used to represent the status of a pull request in the comment timeline."
    },
    "clipboard_copy": {
      "id": "clipboard_copy",
      "displayName": "Clipboard copy",
      "description": "Use clipboard copy to copy element text content or input values to the clipboard."
    },
    "close_button": {
      "id": "close_button",
      "displayName": "Close button",
      "description": "Use close button to render an × without default button styles."
    },
    "counter": {
      "id": "counter",
      "displayName": "Counter",
      "description": "Use counter to add a count to navigational elements and buttons."
    },
    "counter_label": {
      "id": "counter_label",
      "displayName": "Counter label",
      "description": "Use the counter label component to add a count to navigational elements and buttons."
    },
    "details": {
      "id": "details",
      "displayName": "Details",
      "description": "Use details component to reveal content after clicking a button."
    },
    "dialog": {
      "id": "dialog",
      "displayName": "Dialog",
      "description": "Use dialog component for all modals. It renders on top of the rest of the app with an overlay."
    },
    "dropdown": {
      "id": "dropdown",
      "displayName": "Dropdown",
      "description": "Use dropdown for a lightweight context menu for housing navigation and actions."
    },
    "dropdown_menu": {
      "id": "dropdown_menu",
      "displayName": "Dropdown menu",
      "description": "Use dropdown menu for a lightweight context menu for housing navigation and actions."
    },
    "filter_list": {
      "id": "filter_list",
      "displayName": "Filter list",
      "description": "Use filter list component as a menu with filter options that filter the main content of the page."
    },
    "filtered_search": {
      "id": "filtered_search",
      "displayName": "Filtered search",
      "description": "Use filtered search component helps style an ActionMenu and a TextInput side-by-side."
    },
    "flash": {
      "id": "flash",
      "displayName": "Flash",
      "description": "Use flash component to inform users of successful or pending actions."
    },
    "flex": {
      "id": "flex",
      "displayName": "Flex",
      "description": "Use flex to make an element lay out its content using the flexbox model."
    },
    "flex_item": {
      "id": "flex_item",
      "displayName": "Flex item",
      "description": "Use flex item to specify the ability of a flex item to alter its dimensions to fill available space."
    },
    "form_control": {
      "id": "form_control",
      "displayName": "Form control",
      "description": "Use form control to render a labelled input and, optionally, associated validation text and/or hint text."
    },
    "header": {
      "id": "header",
      "displayName": "Header",
      "description": "Use the header component to create a header that has all of its items aligned vertically with consistent horizontal spacing."
    },
    "heading": {
      "id": "heading",
      "displayName": "Heading",
      "description": "Use heading to communicate page organization and hierarchy."
    },
    "hellip_button": {
      "id": "hellip_button",
      "displayName": "Hellip button",
      "description": "Use hellip button to render a button with a hellip."
    },
    "hidden": {
      "id": "hidden",
      "displayName": "Hidden",
      "description": "Use hidden to responsively hide or show content in narrow, regular and wide viewports."
    },
    "hidden_text_expander": {
      "id": "hidden_text_expander",
      "displayName": "Hidden text expander",
      "description": "Use hidden text expander to indicate and toggle hidden text."
    },
    "icon_button": {
      "id": "icon_button",
      "displayName": "Icon button",
      "description": "Use icon button as an accessible button component with no text and only icon."
    },
    "image": {
      "id": "image",
      "displayName": "Image",
      "description": "Use image to render images."
    },
    "image_crop": {
      "id": "image_crop",
      "displayName": "Image crop",
      "description": "Use image crop as a client-side mechanism to crop images."
    },
    "inline_autocomplete": {
      "id": "inline_autocomplete",
      "displayName": "Inline autocomplete",
      "description": "Use inline autocomplete to provide suggestions for an input or textarea."
    },
    "label": {
      "id": "label",
      "displayName": "Label",
      "description": "Use label component to add contextual metadata to a design."
    },
    "label_group": {
      "id": "label_group",
      "displayName": "Label group",
      "description": "Use label group component to add commonly used margins and other layout constraints to groups of labels."
    },
    "layout": {
      "id": "layout",
      "displayName": "Layout",
      "description": "Use layout to build a main/sidebar layout."
    },
    "link": {
      "id": "link",
      "displayName": "Link",
      "description": "Use link for navigating from one page to another."
    },
    "local_time": {
      "id": "local_time",
      "displayName": "Local time",
      "description": "Use local time to format a date and time in the user's preferred locale format."
    },
    "markdown": {
      "id": "markdown",
      "displayName": "Markdown",
      "description": "Use markdown to wrap markdown content."
    },
    "markdown_editor": {
      "id": "markdown_editor",
      "displayName": "Markdown editor",
      "description": "Use markdown editor for a full-featured Markdown input."
    },
    "markdown_viewer": {
      "id": "markdown_viewer",
      "displayName": "Markdown viewer",
      "description": "Use markdown viewer to display rendered Markdown and facilitate interaction."
    },
    "menu": {
      "id": "menu",
      "displayName": "Menu",
      "description": "Use menu to create vertical lists of navigational links."
    },
    "nav_list": {
      "id": "nav_list",
      "displayName": "Nav list",
      "description": "Use a nav list to render a vertical list of navigation links."
    },
    "nav_list_item": {
      "id": "nav_list_item",
      "displayName": "Nav list item",
      "description": "Use a nav list section to render navigational links on a nav list."
    },
    "nav_list_section": {
      "id": "nav_list_section",
      "displayName": "Nav list section",
      "description": "Use a nav list section to logically group navigational links on a nav list."
    },
    "navigation_tab": {
      "id": "navigation_tab",
      "displayName": "Navigation tab",
      "description": "Use navigation tab as part of the navigation components such as Primer::Alpha::TabNav and Primer::Alpha::UnderlineNav and don't use it by itself."
    },
    "octicon": {
      "id": "octicon",
      "displayName": "Octicon",
      "description": "Use octicon to render an octicon with system arguments."
    },
    "octicon_symbols": {
      "id": "octicon_symbols",
      "displayName": "Octicon symbols",
      "description": "Use octicon symbols to render a symbol dictionary using a list of Octicon."
    },
    "overlay": {
      "id": "overlay",
      "displayName": "Overlay",
      "description": "Use overlay to provide a flexible floating surface for displaying transient content such as menus, selection options, dialogs, and more."
    },
    "page_layout": {
      "id": "page_layout",
      "displayName": "Page layout",
      "description": "Use the page layout component to define the header, main, pane, and footer areas of a page."
    },
    "pagehead": {
      "id": "pagehead",
      "displayName": "Pagehead",
      "description": "Use pagehead to provide a clear, separated page title."
    },
    "pagination": {
      "id": "pagination",
      "displayName": "Pagination",
      "description": "Use pagination to display a sequence of links that allow navigation to discrete, related pages."
    },
    "pointer_box": {
      "id": "pointer_box",
      "displayName": "Poiner box",
      "description": "Use pointer box as a custom, bordered box with a caret pointer."
    },
    "popover": {
      "id": "popover",
      "displayName": "Popover",
      "description": "Use popover to bring attention to specific user interface elements and suggest an action or to guide users through a new experience."
    },
    "portal": {
      "id": "portal",
      "displayName": "Portal",
      "description": "Use portals to create a separation between the logical React component hierarchy and the physical DOM."
    },
    "progress_bar": {
      "id": "progress_bar",
      "displayName": "Progress bar",
      "description": "Use progress bars to visualize task completion.",
      "implementations": {
        "react": "https://primer.style/components/ProgressBar",
        "viewComponent": "https://primer.style/view-components/components/progressbar",
        "css": "https://primer.style/css/components/progress"
      }
    },
    "radio": {
      "id": "radio",
      "displayName": "Radio",
      "description": "Use radio when a user needs to select one option from a list."
    },
    "radio_group": {
      "id": "radio_group",
      "displayName": "Radio group",
      "description": "Use radio group to render a set of radio inputs to let users make a single selection from a short list of options."
    },
    "segmented_control": {
      "id": "segmented_control",
      "displayName": "Segmented control",
      "description": "Use a segmented control to let users select an option from a short list and immediately apply the selection."
    },
    "select": {
      "id": "select",
      "displayName": "Select",
      "description": "Use a select input when a user needs to select one option from a long list."
    },
    "select_panel": {
      "id": "select_panel",
      "displayName": "Select panel",
      "description": "Use a select panel to provides an anchor that will open an overlay with a list of selectable items, and a text input to filter the selectable items."
    },
    "side_nav": {
      "id": "side_nav",
      "displayName": "Side nav",
      "description": "Use side nav for a vertical list of navigational links, typically used on the left side of a page."
    },
    "spinner": {
      "id": "spinner",
      "displayName": "Spinner",
      "description": "Use spinner to let users know that content is being loaded."
    },
    "split_page_layout": {
      "id": "split_page_layout",
      "displayName": "Split page layout",
      "description": "Use split page layout to provide structure for a split page layout, including independent scrolling for the pane and content regions. Useful for responsive list/detail patterns, when an item in the pane updates the page content on selection."
    },
    "state": {
      "id": "state",
      "displayName": "State",
      "description": "Use state for rendering the status of an item."
    },
    "state_label": {
      "id": "state_label",
      "displayName": "State label",
      "description": "Use state label to show the status of an issue or pull request."
    },
    "styled_octicon": {
      "id": "styled_octicon",
      "displayName": "Styled octicon",
      "description": "Use styled octicon to render an Octicon as a component."
    },
    "sub_nav": {
      "id": "sub_nav",
      "displayName": "Sub nav",
      "description": "Use the sub nav component for navigation on a dashboard-type interface with another set of navigation components above it."
    },
    "subhead": {
      "id": "subhead",
      "displayName": "Subhead",
      "description": "Use subhead as the start of a section."
    },
    "tab_container": {
      "id": "tab_container",
      "displayName": "Tab container",
      "description": "Use tab container to create tabbed content with keyboard support."
    },
    "tab_nav": {
      "id": "tab_nav",
      "displayName": "Tab nav",
      "description": "Use tab nav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page."
    },
    "tab_panels": {
      "id": "tab_panels",
      "displayName": "Tab panels",
      "description": "Use tab panels for tabs with panel navigation."
    },
    "text": {
      "id": "text",
      "displayName": "Text",
      "description": "Use text as a wrapper component that will apply typography styles to the text inside."
    },
    "text_field": {
      "id": "text_field",
      "displayName": "Text field",
      "description": "Use text field outside a form."
    },
    "text_input": {
      "id": "text_input",
      "displayName": "Text input",
      "description": "Use text input as a form component to add default styling to the native text input."
    },
    "text_input_with_tokens": {
      "id": "text_input_with_tokens",
      "displayName": "Text input with tokens",
      "description": "Use text input with tokens to show multiple values in one field."
    },
    "textarea": {
      "id": "textarea",
      "displayName": "Textarea",
      "description": "Use text area for multi-line text input form fields."
    },
    "time_ago": {
      "id": "time_ago",
      "displayName": "Time ago",
      "description": "Use time ago to display a time relative to how long ago it was."
    },
    "timeline": {
      "id": "timeline",
      "displayName": "Timeline",
      "description": "The timeline component is used to display items on a vertical timeline, connected by Timeline.Badge elements."
    },
    "timeline_item": {
      "id": "timeline_item",
      "displayName": "Timeline item",
      "description": "Use timeline item to display items on a vertical timeline, connected by badge elements."
    },
    "toggle_switch": {
      "id": "toggle_switch",
      "displayName": "Toggle switch",
      "description": "Use toggle switch to toggle a setting on or off, and immediately saves the change."
    },
    "token": {
      "id": "token",
      "displayName": "Token",
      "description": "Use token to represents a piece of data. They are typically used to show a collection of related attributes."
    },
    "tooltip": {
      "id": "tooltip",
      "displayName": "Tooltip",
      "description": "Use tooltip component to add context to elements on the page."
    },
    "tree_view": {
      "id": "tree_view",
      "displayName": "Tree view",
      "description": "Use tree view for a hierarchical list of items where nested items can be expanded and collapsed."
    },
    "truncate": {
      "id": "truncate",
      "displayName": "Truncate",
      "description": "Use truncate to shorten overflowing text with an ellipsis."
    },
    "underline_nav": {
      "id": "underline_nav",
      "displayName": "Underline nav",
      "description": "Use underline nav to allow tab like navigation with overflow behaviour in your UI."
    },
    "underline_panels": {
      "id": "underline_panels",
      "displayName": "Underline panels",
      "description": "Use underline panels to style tabs with an associated panel and an underlined selected state."
    }
  }
}