Skip to content

Component status

Check the current status of Primer React components.

See the component lifecycle for more information about each status.

ActionListBetaNot reviewedAn 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)DeprecatedNot reviewed
ActionMenuBetaReviewedAn ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button.
ActionMenu (legacy)DeprecatedNot reviewed
AnchoredOverlayAlphaNot reviewedUse 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.
AutocompleteAlphaNot reviewedUsed to render a text input that allows a user to quickly filter through a list of options to pick one or more values.
AvatarAlphaNot reviewedUse avatars to represent users or organizations.
AvatarPairAlphaNot reviewedUse avatar pair to display two avatars when one is secondary to the other.
AvatarStackAlphaNot reviewedUse an avatar stack to display two or more avatars in an inline stack.
BorderBoxDeprecatedNot reviewed
BoxBetaNot reviewedA low-level utility component that accepts styles to enable custom theme-aware styling
BranchNameAlphaNot reviewedUse BranchName as a label-type component rendered as an <a> tag by default with monospace font.
BreadcrumbsAlphaNot reviewedUse 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.
ButtonAlphaNot reviewedUse button for the main actions on a page or form.
Button (legacy)DeprecatedNot reviewed
ButtonGroupAlphaNot reviewedUse button group to render a series of buttons.
CheckboxAlphaNot reviewedUse checkboxes to toggle between checked and unchecked states in a list or as a standalone form field
CheckboxGroupAlphaNot reviewedRenders a set of checkboxes to let users make one or more selections from a short list of options
ChoiceFieldsetDeprecatedNot reviewed
ChoiceInputFieldDeprecatedNot reviewedThe ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional hint text.
CircleBadgeAlphaNot reviewedUse circle badge to visually connect logos of third-party services like in the marketplace.
CircleOcticonAlphaNot reviewedUse 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.
CounterLabelAlphaNot reviewedUse the CounterLabel component to add a count to navigational elements and buttons.
DataTableDraftNot reviewed
DetailsAlphaNot reviewedUse details component to reveal content after clicking a button.
DialogAlphaNot reviewed
Dialog v2DraftNot reviewedUse dialog component for all modals. It renders on top of the rest of the app with an overlay.
DropdownDeprecatedNot reviewed
DropdownMenuDeprecatedNot reviewed
FilteredSearchAlphaNot reviewedUse filtered search component helps style an ActionMenu and a TextInput side-by-side.
FilterListAlphaNot reviewedUse filter list component as a menu with filter options that filter the main content of the page.
FlashAlphaNot reviewedUse flash component to inform users of successful or pending actions.
FlexDeprecatedNot reviewed
FormControlAlphaNot reviewedRenders a labelled input and, optionally, associated validation text and/or hint text.
FormGroupDeprecatedNot reviewed
GridDeprecatedNot reviewed
HeaderAlphaNot reviewedUse the Header component to create a header that has all of its items aligned vertically with consistent horizontal spacing
HeadingAlphaNot reviewedUse Heading to structure your content and provide an accessible experience for users of assistive technologies.
HiddenDraftNot reviewedUse Hidden to responsively hide or show content in narrow, regular and wide viewports.
IconButtonAlphaNot reviewedAn accessible button component with no text and only icon.
InlineAutocompleteDraftNot reviewedProvides inline auto completion suggestions for an input or textarea.
InputFieldDeprecatedNot reviewedThe InputField component is used to render a labelled text input and, optionally, associated validation text and hint text.
LabelAlphaNot reviewedUse Label components to add contextual metadata to a design.
Label (legacy)DeprecatedNot reviewedUse Label components to add contextual metadata to a design.
LabelGroupAlphaNot reviewedUse LabelGroup components to add commonly used margins and other layout constraints to groups of Labels
LinkAlphaNot reviewedUse link for navigating from one page to another.
MarkdownEditorDraftNot reviewedFull-featured Markdown input.
MarkdownViewerDraftNot reviewedDisplays rendered Markdown and facilitates interaction.
NavListAlphaNot reviewedUse a nav list to render a vertical list of navigation links.
OverlayAlphaNot reviewedUse Overlay to provide a flexible floating surface for displaying transient content such as menus, selection options, dialogs, and more.
PageheadAlphaNot reviewedUse Pagehead to provide a clear, separated page title.
PageHeaderDraftNot reviewedPageHeader is used to determine the arrangement of the top-level headings and how elements adopt to different viewports.
PageLayoutAlphaReviewedUse the page layout component to define the header, main, pane, and footer areas of a page.
PaginationAlphaNot reviewedUse Pagination to display a sequence of links that allow navigation to discrete, related pages.
PointerBoxAlphaNot reviewedA customisable, bordered Box with a caret pointer
PopoverAlphaNot reviewedUse Popovers to bring attention to specific user interface elements and suggest an action or to guide users through a new experience
PortalAlphaNot reviewedPortals allow you to create a separation between the logical React component hierarchy and the physical DOM.
PositionDeprecatedNot reviewed
ProgressBarAlphaNot reviewedUse progress bars to visualize task completion.
RadioAlphaNot reviewedUse radios when a user needs to select one option from a list
RadioGroupAlphaNot reviewedRenders a set of radio inputs to let users make a single selection from a short list of options
RelativeTimeAlphaNot reviewed
SegmentedControlAlphaNot reviewedUse a segmented control to let users select an option from a short list and immediately apply the selection
SelectAlphaReviewedUse a select input when a user needs to select one option from a long list
SelectMenuDeprecatedNot reviewed
SelectPanelAlphaNot reviewedUse 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.
SideNavDeprecatedNot reviewedUse side nav for a vertical list of navigational links, typically used on the left side of a page.
SpinnerAlphaNot reviewedUse spinners to let users know that content is being loaded.
SplitPageLayoutAlphaReviewedProvides 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.
StateLabelAlphaNot reviewedUse state label to show the status of an issue or pull request.
StyledOcticonAlphaNot reviewedUse StyledOcticon to render an Octicon as a component.
SubNavAlphaNot reviewedUse the sub nav component for navigation on a dashboard-type interface with another set of navigation components above it.
TabNavAlphaNot reviewedUse tab nav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
TextAlphaReviewedUse text as a wrapper component that will apply typography styles to the text inside.
TextareaAlphaNot reviewedUse Textarea for multi-line text input form fields
TextInputAlphaNot reviewedUse text input as a form component to add default styling to the native text input.
TextInputWithTokensAlphaNot reviewedUsed to show multiple values in one field
TimelineAlphaNot reviewedThe timeline component is used to display items on a vertical timeline, connected by Timeline.Badge elements.
ToggleSwitchAlphaNot reviewedToggles a setting on or off, and immediately saves the change
TokenAlphaNot reviewedA Token represents a piece of data. They are typically used to show a collection of related attributes.
TooltipAlphaNot reviewedUse tooltip component to add context to elements on the page.
TreeViewBetaReviewedA hierarchical list of items where nested items can be expanded and collapsed.
TruncateAlphaNot reviewedUse truncate to shorten overflowing text with an ellipsis.
UnderlineNavAlphaNot reviewedUse underline nav to allow tab like navigation with overflow behaviour in your UI.
UnderlineNav v2DraftReviewedUse an underlined nav to allow tab like navigation with overflow behaviour in your UI.