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