Skip to content
Component status
Check the current status of Primer React components.
See the component lifecycle for more information about each status.
| Component | Status | Accessibility | Description |
|---|---|---|---|
| ActionList | Not reviewed | 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. | |
| ActionList (legacy) | Not reviewed | ||
| ActionMenu | Reviewed | An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button. | |
| ActionMenu (legacy) | Not reviewed | ||
| AnchoredOverlay | Not reviewed | ||
| Autocomplete | Not reviewed | Used to render a text input that allows a user to quickly filter through a list of options to pick one or more values. | |
| Avatar | Not reviewed | Use avatars to represent users or organizations. | |
| AvatarPair | Not reviewed | ||
| AvatarStack | Not reviewed | Use an avatar stack to display two or more avatars in an inline stack. | |
| BorderBox | Not reviewed | ||
| Box | Not reviewed | A low-level utility component that accepts styled system props to enable custom theme-aware styling | |
| BranchName | Not reviewed | ||
| Breadcrumbs | Not reviewed | 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. | |
| Button | Not reviewed | Use button for the main actions on a page or form. | |
| Button (legacy) | Not reviewed | ||
| ButtonGroup | Not reviewed | ||
| Checkbox | Not reviewed | Use checkboxes to toggle between checked and unchecked states in a list or as a standalone form field | |
| CheckboxGroup | Not reviewed | Renders a set of checkboxes to let users make one or more selections from a short list of options | |
| ChoiceFieldset | Not reviewed | ||
| ChoiceInputField | Not reviewed | The ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional hint text. | |
| CircleBadge | Not reviewed | ||
| CircleOcticon | Not reviewed | ||
| CounterLabel | Not reviewed | Use the CounterLabel component to add a count to navigational elements and buttons. | |
| Details | Not reviewed | ||
| Dialog | Not reviewed | ||
| Dialog v2 | Not reviewed | ||
| Dropdown | Not reviewed | ||
| DropdownMenu | Not reviewed | ||
| FilteredSearch | Not reviewed | ||
| FilterList | Not reviewed | ||
| Flash | Not reviewed | ||
| Flex | Not reviewed | ||
| FormControl | Not reviewed | Renders a labelled input and, optionally, associated validation text and/or hint text. | |
| FormGroup | Not reviewed | ||
| Grid | Not reviewed | ||
| Header | Not reviewed | Use the Header component to create a header that has all of its items aligned vertically with consistent horizontal spacing | |
| Heading | Not reviewed | Use Heading to structure your content and provide an accessible experience for users of assistive technologies. | |
| Hidden | Not reviewed | Use Hidden to responsively hide or show content in narrow, regular and wide viewports. | |
| IconButton | Not reviewed | An accessible button component with no text and only icon. | |
| InlineAutocomplete | Not reviewed | Provides inline auto completion suggestions for an input or textarea. | |
| InputField | Not reviewed | The InputField component is used to render a labelled text input and, optionally, associated validation text and hint text. | |
| Label | Not reviewed | Use Label components to add contextual metadata to a design. | |
| Label (legacy) | Not reviewed | Use Label components to add contextual metadata to a design. | |
| LabelGroup | Not reviewed | Use LabelGroup components to add commonly used margins and other layout constraints to groups of Labels | |
| Link | Not reviewed | ||
| MarkdownEditor | Not reviewed | Full-featured Markdown input. | |
| MarkdownViewer | Not reviewed | Displays rendered Markdown and facilitates interaction. | |
| NavList | Not reviewed | Use a nav list to render a vertical list of navigation links. | |
| Overlay | Not reviewed | Use Overlay to provide a flexible floating surface for displaying transient content such as menus, selection options, dialogs, and more. | |
| Pagehead | Not reviewed | Use Pagehead to provide a clear, separated page title. | |
| PageLayout | Reviewed | ||
| Pagination | Not reviewed | Use Pagination to display a sequence of links that allow navigation to discrete, related pages. | |
| PointerBox | Not reviewed | A customisable, bordered Box with a caret pointer | |
| Popover | Not reviewed | Use Popovers to bring attention to specific user interface elements and suggest an action or to guide users through a new experience | |
| Portal | Not reviewed | Portals allow you to create a separation between the logical React component hierarchy and the physical DOM. | |
| Position | Not reviewed | ||
| ProgressBar | Not reviewed | Use progress bars to visualize task completion. | |
| Radio | Not reviewed | Use radios when a user needs to select one option from a list | |
| RadioGroup | Not reviewed | Renders a set of radio inputs to let users make a single selection from a short list of options | |
| SegmentedControl | Not reviewed | Use a segmented control to let users select an option from a short list and immediately apply the selection | |
| Select | Reviewed | Use a select input when a user needs to select one option from a long list | |
| SelectMenu | Not reviewed | ||
| SelectPanel | Not reviewed | ||
| SideNav | Not reviewed | ||
| Spinner | Not reviewed | Use spinners to let users know that content is being loaded. | |
| SplitPageLayout | Reviewed | Provides 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. | |
| StateLabel | Not reviewed | ||
| StyledOcticon | Not reviewed | Use StyledOcticon to render an Octicon as a component. | |
| SubNav | Not reviewed | ||
| TabNav | Not reviewed | ||
| Text | Not reviewed | ||
| Textarea | Not reviewed | Use Textarea for multi-line text input form fields | |
| TextInput | Not reviewed | ||
| TextInputWithTokens | Not reviewed | Used to show multiple values in one field | |
| Timeline | Not reviewed | ||
| ToggleSwitch | Not reviewed | Toggles a setting on or off, and immediately saves the change | |
| Token | Not reviewed | A Token represents a piece of data. They are typically used to show a collection of related attributes. | |
| Tooltip | Not reviewed | ||
| TreeView | Not reviewed | A hierarchical list of items where nested items can be expanded and collapsed. | |
| Truncate | Not reviewed | ||
| UnderlineNav | Not reviewed | ||
| UnderlineNav v2 | Not reviewed | Use an underlined nav to allow tab like navigation with overflow behaviour in your UI. |
Edit this page on GitHub
2 contributors
Last edited by josepmartins on October 26, 2022