Skip to content

Component status

Check the current status of Primer ViewComponents

See the component lifecycle for more information about each status.

AutoCompleteBetaUse AutoComplete to provide a user with a list of selectable suggestions that appear when they type into the input field.
AutoCompleteItemBetaUse AutoCompleteItem to list results of an auto-completed search.
AvatarBetaAvatar can be used to represent users and organizations on GitHub.
AvatarStackBetaUse AvatarStack to stack multiple avatars together.
BaseButtonBetaUse BaseButton to render an unstyled <button> tag that can be customized.
BlankslateBetaUse Blankslate when there is a lack of content within a page or section.
BorderBoxBetaBorderBox is a Box component with a border.
BorderBoxHeaderAlphaBorderBox::Header is used inside BorderBox to render its header slot.
BoxStableBox is a basic wrapper component for most layout related needs.
BreadcrumbsBetaUse Breadcrumbs to display page hierarchy.
ButtonBetaUse Button for actions (e.g. in forms).
ButtonGroupBetaUse ButtonGroup to render a series of buttons.
ButtonMarketingAlphaUse ButtonMarketing for actions (e.g. in forms).
ClipboardCopyBetaUse ClipboardCopy to copy element text content or input values to the clipboard.
CloseButtonBetaUse CloseButton to render an × without default button styles.
CounterBetaUse Counter to add a count to navigational elements and buttons.
DetailsBetaUse DetailsComponent to reveal content after clicking a button.
DropdownAlphaDropdown is a lightweight context menu for housing navigation and actions.
DropdownMenuDeprecatedDropdownMenus are lightweight context menus for housing navigation and actions.
FlashBetaUse Flash to inform users of successful or pending actions.
FlexDeprecatedUse Flex to make an element lay out its content using the flexbox model.
FlexItemDeprecatedUse FlexItem to specify the ability of a flex item to alter its dimensions to fill available space.
HeadingBetaHeading should be used to communicate page organization and hierarchy.
HellipButtonAlphaUse HellipButton to render a button with a hellip.
HiddenTextExpanderAlphaUse HiddenTextExpander to indicate and toggle hidden text.
IconButtonBetaUse IconButton to render Icon-only buttons without the default button styles.
ImageAlphaUse Image to render images.
ImageCropAlphaA client-side mechanism to crop images.
LabelBetaUse Label to add contextual metadata to a design.
LayoutAlphaUse Layout to build a main/sidebar layout.
LayoutAlphaLayout provides foundational patterns for responsive pages.
LinkBetaUse Link for navigating from one page to another.
LocalTimeAlphaUse LocalTime to format a date and time in the user's preferred locale format.
MarkdownBetaUse Markdown to wrap markdown content.
MenuAlphaUse Menu to create vertical lists of navigational links.
NavigationTabAlphaThis component is part of navigation components such as Primer::Alpha::TabNav and Primer::Alpha::UnderlineNav and should not be used by itself.
OcticonBetaOcticon renders an Octicon with System arguments .
OcticonSymbolsAlphaOcticonSymbols renders a symbol dictionary using a list of Octicon .
PopoverBetaUse Popover to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
ProgressBarBetaUse ProgressBar to visualize task completion.
SpinnerBetaUse Spinner to let users know that content is being loaded.
StateBetaUse State for rendering the status of an item.
SubheadBetaUse Subhead as the start of a section.
TabContainerAlphaUse TabContainer to create tabbed content with keyboard support.
TabNavAlphaUse TabNav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
TabPanelsAlphaUse TabPanels for tabs with panel navigation.
TextBetaText is a wrapper component that will apply typography styles to the text inside.
TimeAgoBetaUse TimeAgo to display a time relative to how long ago it was.
TimelineItemBetaUse TimelineItem to display items on a vertical timeline, connected by badge elements.
TooltipBetaTooltip is a wrapper component that will apply a tooltip to the provided content.
TruncateBetaUse Truncate to shorten overflowing text with an ellipsis.
TruncateBetaUse Truncate to shorten overflowing text with an ellipsis.
UnderlineNavAlphaUse UnderlineNav to style navigation links with a minimal underlined selected state, typically placed at the top of the page.
UnderlinePanelsAlphaUse UnderlinePanels to style tabs with an associated panel and an underlined selected state.

Criteria for changing component status

Promote from internal application to alpha

We recommend building new Primer ViewComponents in an application that uses them first, upstreaming them when:

  • The Design Systems team has approved the component for inclusion in Primer.
  • The CSS for the component has been added in a release of Primer CSS.
  • The component is used in production, using all proposed APIs and their permutations.
  • The component is compatible with System arguments as appropriate.
  • The API is consistent with existing components.

Promote from alpha to beta

  • The component does not use any deprecated view_component framework features, such as Slots v1.
  • Documentation and storybook stories are complete.
  • The API is approaching a point of stability.
  • The component is used in production at least 3 times.