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