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 | Beta | 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) | Deprecated | Not reviewed | |
| ActionMenu | Beta | Not reviewed | An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button. |
| ActionMenu (legacy) | Deprecated | Not reviewed | |
| AnchoredOverlay | Alpha | Not reviewed | 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. |
| Autocomplete | Alpha | 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 | Alpha | Not reviewed | Use avatars to represent users or organizations. |
| AvatarPair | Alpha | Not reviewed | Use avatar pair to display two avatars when one is secondary to the other. |
| AvatarStack | Alpha | Not reviewed | Use an avatar stack to display two or more avatars in an inline stack. |
| Box | Beta | Not reviewed | A low-level utility component that accepts styles to enable custom theme-aware styling |
| BranchName | Alpha | Not reviewed | Use BranchName as a label-type component rendered as an <a> tag by default with monospace font. |
| Breadcrumbs | Alpha | 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 | Alpha | Not reviewed | Use button for the main actions on a page or form. |
| Button (legacy) | Deprecated | Not reviewed | |
| ButtonGroup | Alpha | Not reviewed | Use button group to render a series of buttons. |
| Checkbox | Alpha | Not reviewed | Use checkboxes to toggle between checked and unchecked states in a list or as a standalone form field |
| CheckboxGroup | Alpha | Not reviewed | Renders a set of checkboxes to let users make one or more selections from a short list of options |
| CircleBadge | Alpha | Not reviewed | Use circle badge to visually connect logos of third-party services like in the marketplace. |
| CircleOcticon | Alpha | Not reviewed | 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. |
| CounterLabel | Alpha | Not reviewed | Use the CounterLabel component to add a count to navigational elements and buttons. |
| DataTable | Draft | Not reviewed | |
| Details | Alpha | Not reviewed | Use details component to reveal content after clicking a button. |
| Dialog | Alpha | Not reviewed | |
| Dialog v2 | Draft | Not reviewed | Use dialog component for all modals. It renders on top of the rest of the app with an overlay. |
| DropdownMenu | Deprecated | Not reviewed | |
| FilteredSearch | Deprecated | Not reviewed | The FilteredSearch component helps style an ActionMenu and a TextInput side-by-side. |
| FilterList | Deprecated | Not reviewed | The FilterList component is a menu with filter options that filter the main content of the page. |
| Flash | Alpha | Not reviewed | Use flash component to inform users of successful or pending actions. |
| FormControl | Alpha | Not reviewed | Renders a labelled input and, optionally, associated validation text and/or hint text. |
| Header | Alpha | Not reviewed | Use the Header component to create a header that has all of its items aligned vertically with consistent horizontal spacing |
| Heading | Alpha | Not reviewed | Use Heading to structure your content and provide an accessible experience for users of assistive technologies. |
| Hidden | Draft | Not reviewed | Use Hidden to responsively hide or show content in narrow, regular and wide viewports. |
| IconButton | Alpha | Not reviewed | An accessible button component with no text and only icon. |
| InlineAutocomplete | Draft | Not reviewed | Provides inline auto completion suggestions for an input or textarea. |
| Label | Alpha | Not reviewed | Use Label components to add contextual metadata to a design. |
| LabelGroup | Alpha | Not reviewed | Use LabelGroup components to add commonly used margins and other layout constraints to groups of Labels |
| Link | Alpha | Not reviewed | Use link for navigating from one page to another. |
| MarkdownEditor | Draft | Not reviewed | Full-featured Markdown input. |
| MarkdownViewer | Draft | Not reviewed | Displays rendered Markdown and facilitates interaction. |
| NavList | Alpha | Not reviewed | Use a nav list to render a vertical list of navigation links. |
| Octicon | Alpha | Not reviewed | Use Octicon to render an Octicon as a component. |
| Overlay | Alpha | Not reviewed | Use Overlay to provide a flexible floating surface for displaying transient content such as menus, selection options, dialogs, and more. |
| Pagehead | Alpha | Not reviewed | Use Pagehead to provide a clear, separated page title. |
| PageHeader | Draft | Not reviewed | PageHeader is used to determine the arrangement of the top-level headings and how elements adopt to different viewports. |
| PageLayout | Alpha | Reviewed | Use the page layout component to define the header, main, pane, and footer areas of a page. |
| Pagination | Alpha | Not reviewed | Use Pagination to display a sequence of links that allow navigation to discrete, related pages. |
| PointerBox | Alpha | Not reviewed | A customisable, bordered Box with a caret pointer |
| Popover | Alpha | 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 | Alpha | Not reviewed | Portals allow you to create a separation between the logical React component hierarchy and the physical DOM. |
| ProgressBar | Alpha | Not reviewed | Use progress bars to visualize task completion. |
| Radio | Alpha | Not reviewed | Use radios when a user needs to select one option from a list |
| RadioGroup | Alpha | Not reviewed | Renders a set of radio inputs to let users make a single selection from a short list of options |
| RelativeTime | Alpha | Not reviewed | |
| SegmentedControl | Alpha | Not reviewed | Use a segmented control to let users select an option from a short list and immediately apply the selection |
| Select | Alpha | Reviewed | Use a select input when a user needs to select one option from a long list |
| SelectPanel | Alpha | Not reviewed | 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. |
| SideNav | Deprecated | Not reviewed | Use side nav for a vertical list of navigational links, typically used on the left side of a page. |
| Spinner | Alpha | Not reviewed | Use spinners to let users know that content is being loaded. |
| SplitPageLayout | Alpha | 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 | Alpha | Not reviewed | Use state label to show the status of an issue or pull request. |
| SubNav | Alpha | Not reviewed | Use the sub nav component for navigation on a dashboard-type interface with another set of navigation components above it. |
| TabNav | Alpha | Not reviewed | Use tab nav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page. |
| Text | Alpha | Reviewed | Use text as a wrapper component that will apply typography styles to the text inside. |
| Textarea | Alpha | Not reviewed | Use Textarea for multi-line text input form fields |
| TextInput | Alpha | Not reviewed | Use text input as a form component to add default styling to the native text input. |
| TextInputWithTokens | Alpha | Not reviewed | Used to show multiple values in one field |
| Timeline | Alpha | Not reviewed | The timeline component is used to display items on a vertical timeline, connected by Timeline.Badge elements. |
| ToggleSwitch | Alpha | Not reviewed | Toggles a setting on or off, and immediately saves the change |
| Token | Alpha | Not reviewed | A Token represents a piece of data. They are typically used to show a collection of related attributes. |
| Tooltip | Alpha | Not reviewed | Use tooltip component to add context to elements on the page. |
| TreeView | Beta | Reviewed | A hierarchical list of items where nested items can be expanded and collapsed. |
| Truncate | Alpha | Not reviewed | Use truncate to shorten overflowing text with an ellipsis. |
| UnderlineNav | Alpha | Not reviewed | Use underline nav to allow tab like navigation with overflow behaviour in your UI. |
| UnderlineNav v2 | Draft | Reviewed | Use an underlined nav to allow tab like navigation with overflow behaviour in your UI. |