Components
Design and usage guidelines for individual Primer components.
Action bar
Action bar contains a collection of horizontally aligned 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.
Banner
Banner is used to highlight important information.
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, eg. in the marketplace.
Circle octicon
Use 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.
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.
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.
Inline message
inline message is used to inform the user about the result of an action within the content.
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.
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.
Pagehead
Pagehead denotes the title and start of a given section.
Pagination
Pagination is a horizontal set of links to navigate paginated content.
Pointer box
A customisable bordered box with a caret pointer
Popover
Popover is used to bring attention to specific user interface elements.
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
The Select Panel is an anchored dialog that allows users to quickly navigate and select one or multiple items from a list. It includes a text input for filtering, supports item grouping, and offers a footer for additional actions. Changes are applied upon closing the panel.
Skeleton avatar
Use skeleton avatar to replace avatars while content is in a loading state.
Skeleton box
Use skeleton box to render a skeleton loader in a size and shape not provided by skeleton avatar or text components.
Skeleton text
Use skeleton text to replace lines of text while content is in a loading state.
Spinner
Use Spinner to show users that an action is in progress.
Split page layout
Split page layout is used to provide structure for a split layout.
Stack
Stack is a layout component that creates responsive horizontal and vertical flows.
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.
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 underline nav is used to display navigation in a horizontal tabbed format.
Underline panels
The underline panels are used to break related content into tabbed panels.