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 | 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 | 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 | |
| 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 | |
| AvatarStack | Alpha | Not reviewed | Use an avatar stack to display two or more avatars in an inline stack. |
| BorderBox | Deprecated | Not reviewed | |
| Box | Beta | Not reviewed | A low-level utility component that accepts styled system props to enable custom theme-aware styling |
| BranchName | Alpha | Not reviewed | |
| 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 | |
| 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 |
| ChoiceFieldset | Deprecated | Not reviewed | |
| ChoiceInputField | Deprecated | Not reviewed | The ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional hint text. |
| CircleBadge | Alpha | Not reviewed | |
| CircleOcticon | Alpha | Not reviewed | |
| CounterLabel | Alpha | Not reviewed | Use the CounterLabel component to add a count to navigational elements and buttons. |
| Details | Alpha | Not reviewed | |
| Dialog | Alpha | Not reviewed | |
| Dialog v2 | Draft | Not reviewed | |
| Dropdown | Deprecated | Not reviewed | |
| DropdownMenu | Deprecated | Not reviewed | |
| FilteredSearch | Alpha | Not reviewed | |
| FilterList | Alpha | Not reviewed | |
| Flash | Alpha | Not reviewed | |
| Flex | Deprecated | Not reviewed | |
| FormControl | Alpha | Not reviewed | Renders a labelled input and, optionally, associated validation text and/or hint text. |
| FormGroup | Deprecated | Not reviewed | |
| Grid | Deprecated | Not reviewed | |
| 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 | Alpha | 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. |
| InputField | Deprecated | Not reviewed | The InputField component is used to render a labelled text input and, optionally, associated validation text and hint text. |
| Label | Alpha | Not reviewed | Use Label components to add contextual metadata to a design. |
| Label (legacy) | Deprecated | 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 | |
| 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. |
| 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. |
| PageLayout | Alpha | Reviewed | |
| 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. |
| Position | Deprecated | Not reviewed | |
| 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 |
| 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 |
| SelectMenu | Deprecated | Not reviewed | |
| SelectPanel | Alpha | Not reviewed | |
| SideNav | Deprecated | Not reviewed | |
| 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 | |
| StyledOcticon | Alpha | Not reviewed | Use StyledOcticon to render an Octicon as a component. |
| SubNav | Alpha | Not reviewed | |
| TabNav | Alpha | Not reviewed | |
| Text | Alpha | Not reviewed | |
| Textarea | Alpha | Not reviewed | Use Textarea for multi-line text input form fields |
| TextInput | Alpha | Not reviewed | |
| TextInputWithTokens | Alpha | Not reviewed | Used to show multiple values in one field |
| Timeline | Alpha | Not reviewed | |
| 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 | |
| TreeView | Draft | Not reviewed | A hierarchical list of items where nested items can be expanded and collapsed. |
| Truncate | Alpha | Not reviewed | |
| UnderlineNav | Alpha | Not reviewed | |
| UnderlineNav v2 | Draft | 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