Skip to content

Component status

Check the current status of Primer React components

See the component lifecycle for more information about each status.

ComponentStatusDescription
ActionListBetaAn 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
ActionMenuBetaAn ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button.
ActionMenu (legacy)Deprecated
AnchoredOverlayAlpha
AutocompleteAlphaUsed to render a text input that allows a user to quickly filter through a list of options to pick one or more values.
AvatarAlphaUse avatars to represent users or organizations.
AvatarPairAlpha
AvatarStackAlphaUse an avatar stack to display two or more avatars in an inline stack.
BorderBoxDeprecated
BoxBetaA low-level utility component that accepts styled system props to enable custom theme-aware styling
BranchNameAlpha
BreadcrumbsAlphaUse 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.
ButtonAlphaUse button for the main actions on a page or form.
Button (legacy)deprecated
ButtonGroupAlpha
CheckboxAlphaUse checkboxes to toggle between checked and unchecked states in a list or as a standalone form field
CheckboxGroupAlphaRenders a set of checkboxes to let users make one or more selections from a short list of options
ChoiceFieldsetDeprecated
ChoiceInputFieldDeprecatedThe ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional hint text.
CircleBadgeAlpha
CircleOcticonAlpha
CounterLabelAlphaUse the CounterLabel component to add a count to navigational elements and buttons.
DetailsAlpha
DialogAlpha
Dialog v2Draft
DropdownDeprecated
DropdownMenuDeprecated
FilteredSearchAlpha
FilterListAlpha
FlashAlpha
FlexDeprecated
FormControlAlphaRenders a labelled input and, optionally, associated validation text and/or hint text.
FormGroupDeprecated
GridDeprecated
HeaderAlphaUse the Header component to create a header that has all of its items aligned vertically with consistent horizontal spacing
HeadingAlphaUse Heading to structure your content and provide an accessible experience for users of assistive technologies.
IconButtonAlphaAn accessible button component with no text and only icon.
InlineAutocompleteDraftProvides inline auto completion suggestions for an input or textarea.
InputFieldDeprecatedThe InputField component is used to render a labelled text input and, optionally, associated validation text and hint text.
LabelAlphaUse Label components to add contextual metadata to a design.
Label (legacy)DeprecatedUse Label components to add contextual metadata to a design.
LabelGroupAlphaUse LabelGroup components to add commonly used margins and other layout constraints to groups of Labels
LinkAlpha
MarkdownEditorDraftFull-featured Markdown input.
MarkdownViewerDraftDisplays rendered Markdown and facilitates interaction.
NavListAlphaUse a nav list to render a vertical list of navigation links.
OverlayAlphaUse Overlay to provide a flexible floating surface for displaying transient content such as menus, selection options, dialogs, and more.
PageheadAlphaUse Pagehead to provide a clear, separated page title.
PageLayoutAlpha
PaginationAlphaUse Pagination to display a sequence of links that allow navigation to discrete, related pages.
PointerBoxAlphaA customisable, bordered Box with a caret pointer
PopoverAlphaUse Popovers to bring attention to specific user interface elements and suggest an action or to guide users through a new experience
PortalAlphaPortals allow you to create a separation between the logical React component hierarchy and the physical DOM.
PositionDeprecated
ProgressBarAlphaUse progress bars to visualize task completion.
RadioAlphaUse radios when a user needs to select one option from a list
RadioGroupAlphaRenders a set of radio inputs to let users make a single selection from a short list of options
SegmentedControlAlphaUse a segmented control to let users select an option from a short list and immediately apply the selection
SelectAlphaUse a select input when a user needs to select one option from a long list
SelectMenuDeprecated
SelectPanelAlpha
SideNavDeprecated
SpinnerAlphaUse spinners to let users know that content is being loaded.
SplitPageLayoutDraftProvides 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.
StateLabelAlpha
StyledOcticonAlphaUse StyledOcticon to render an Octicon as a component.
SubNavAlpha
TabNavAlpha
TextAlpha
TextareaAlphaUse Textarea for multi-line text input form fields
TextInputAlpha
TextInputWithTokensAlphaUsed to show multiple values in one field
TimelineAlpha
ToggleSwitchAlphaToggles a setting on or off, and immediately saves the change
TokenAlphaA Token represents a piece of data. They are typically used to show a collection of related attributes.
TooltipAlpha
TreeViewDraftA hierarchical list of items where nested items can be expanded and collapsed.
TruncateAlpha
UnderlineNavAlpha
UnderlineNav v2DraftUse an underlined nav to allow tab like navigation with overflow behaviour in your UI.