Components

Design and usage guidelines for individual Primer components.

Action bar

Action bar contains a collection of horizontally aligned icon buttons.

Action list

Action list is a vertical list of interactive actions or options. It's composed of items presented in a consistent. single-column format, with room for icons, descriptions, side information, and other rich visuals.

Action menu

Action menu is composed of action list and overlay patterns used for quick actions and selections.

Anchored overlay

Anchored overlay opens an overlay relative to the anchor position.

Autocomplete

Autocomplete allows users to quickly filter through a list of options and pick one or more values for a field.

Avatar

Avatar is an image that represents a user or organization.

Avatar pair

Avatar pair is composed of two avatars, one larger one and a smaller one, overlaid slightly.

Avatar stack

Avatar stack displays two or more avatars in an inline stack.

Blankslate

Blankslate is used as placeholder to tell users why content is missing.

Border box

Border box is a box component with a border.

Box

Box is a basic wrapper component for most layout related needs.

Branch name

Branch name is a label-type component rendered as an <a> tag by default that displays the name of a branch.

Breadcrumbs

Breadcrumbs display the current page or context within the site, allowing them to navigate different levels of the hierarchy.

Button

Button is used to initiate actions on a page or form.

Button group

Button group renders a series of buttons.

Checkbox

Checkbox is a form control for single and multiple selections.

Checkbox group

Checkbox group renders a set of checkboxes.

Circle badge

Circle badge visually connects logos of third-party services like in the marketplace.

Clipboard copy

Clipboard copy copies element text content or input values to the clipboard.

Close button

Use CloseButton to render an `×` without default button styles.

Comment box

Comment box allows users to write and preview comments.

Counter label

Counter label is a button with a numbered label accompanied by text.

Data table

Data table is a 2-dimensional data structure where each row is an item, and each column is a data point about the item.

Details

Details is a styled component to enhance the native behaviors of the <details> element.

Dialog

Dialog is a floating surface used to display transient content such as confirmation actions, selection options, and more.

Filter input

Filter input is an input that provides suggestions through qualifiers and highlights complex filter syntax.

Flash

Flash alert informs users of successful or pending actions.

Form control

Form control displays a labelled input and, optionally, associated validation text and/or hint text.

Header

Header is a navigation bar that has all of its items aligned vertically with consistent horizontal spacing.

Heading

Heading defines the hierarchical structure and importance of the content they contain.

Hidden text expander

Hidden text expander indicates and toggles hidden text.

Icon

Icons at GitHub are called Octicons, which are available in various implementations including React, Figma, Rails, and Styled System.

Icon button

Icon button is used for buttons that show an icon in place of a text label.

Image

Use image to render images.

Image crop

Use image crop as a client-side mechanism to crop images.

Label

Use the label component to add contextual metadata to a design.

Label group

Use label group to add commonly used margins and other layout constraints to groups of Labels

Layout

Layout provides foundational patterns for responsive pages.

Link

Links are used to apply styles to hyperlink text.

Markdown

Use markdown to wrap markdown content.

Nav list

Nav list renders a vertical list of navigation links.

Octicon symbols

OcticonSymbols renders a symbol dictionary using a list of Octicons.

Overlay

Overlay components codify design patterns related to floating surfaces such as dialogs and menus.

Pagehead

Pagehead denotes the title and start of a given section.

Page header

Page header determines the top-level headings of a UI.

Page layout

Page layout defines the header, main, pane, and footer areas of a page.

Pagination

Pagination is a horizontal set of links to navigate paginated content.

Popover

Popover is used to bring attention to specific user interface elements.

Pointer box

A customisable bordered box with a caret pointer

Progress bar

Progress bar visualizes one or more parts of a whole.

Radio

Radio button is a form control for making a single selection from a short list of options.

Radio group

Radio group is used to render a short list of mutually exclusive options.

Relative time

Relative time displays time in a way that is clear, concise, and accessible.

Segmented control

Segmented control is used to pick one choice from a linear set of closely related choices, and immediately apply that selection.

Select

Select is an input for selecting a single option from a menu.

Select panel

Select panel is a semantic dialog that allows for complex selection options within an overlay.

Spinner

Use Spinner to let users know that content is being loaded.

Split page layout

Split page layout is used to provide structure for a split layout.

State label

State label is used for rendering the status of an item.

Subnav

Use the sub nav component for navigation on a dashboard-type interface with another set of navigation components above it.

Tab container

Use tab container to create tabbed content with keyboard support.

Tab nav

Tab nav contains a set of links that let users navigate between different views in the same context.

Tab panels

Tab panels let users switch between views in the same context.

Text

Text styles a string.

Text input

Text input is used to set a value that is a single line of text.

Text input with tokens

Text input with tokens is an input for a value that is a list.

Textarea

Textarea is used to set a value that is multiple lines of text.

Timeline

The timeline component is used to display items on a vertical timeline, connected by timeline elements.

Toast

Toasts are used to show live, time-sensitive feedback to users.

Toggle switch

Toggle switch is used to immediately toggle a setting on or off.

Token

Token is a compact representation of an object, and is typically used to show a collection of related metadata.

Tooltip

Tooltips add additional context to interactive UI elements and appear on mouse hover or keyboard focus.

Tree view

Tree view is a hierarchical list of items that may have a parent-child relationship where children can be toggled into view by expanding or collapsing their parent item.

Truncate

Use Truncate to shorten overflowing text with an ellipsis.

Underline nav

The UnderlineNav is used to display navigation.

Underline panels

Use UnderlinePanels to style tabs with an associated panel and an underlined selected state.