Components

Primer Components are reusable, interactive building blocks for designing consistent user interfaces. They include elements for actions, containment, communication, navigation, selection, and text input, ensuring a cohesive and accessible design across applications. Each component is designed to be flexible and can be seamlessly integrated into various projects to enhance functionality and user experience.

ActionBar

placeholder, blank area with an gray background color

A collection of horizontally aligned IconButtons. The IconButtons can be split into groups by adding a divider. When there is not enough space, IconButtons that don't fit will be added to an overflow menu.

Learn more

ActionList

placeholder, blank area with an gray background color

ActionList 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.

Learn more

ActionMenu

placeholder, blank area with an gray background color

ActionMenu is composed of ActionList and Overlay patterns used for quick actions and selections.

Learn more

AnchoredOverlay

placeholder, blank area with an gray background color

AnchoredOverlay opens an Overlay relative to the anchor position.

Learn more

Autocomplete

placeholder, blank area with an gray background color

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

Learn more

Avatar

placeholder, blank area with an gray background color

Avatar is an image that represents a user or organization.

Learn more

AvatarPair

placeholder, blank area with an gray background color

AvatarPair is composed of two Avatars, one larger one and a smaller one, overlaid slightly.

Learn more

AvatarStack

placeholder, blank area with an gray background color

AvatarStack displays two or more Avatars in an inline stack.

Learn more

Banner

placeholder, blank area with an gray background color

Banner is used to highlight important information.

Learn more

Blankslate

placeholder, blank area with an gray background color

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

Learn more

Box

placeholder, blank area with an gray background color

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

Learn more

BranchName

placeholder, blank area with an gray background color

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

Learn more

Breadcrumbs

placeholder, blank area with an gray background color

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

Learn more

Button

placeholder, blank area with an gray background color

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

Learn more

ButtonGroup

placeholder, blank area with an gray background color

ButtonGroup renders a series of buttons.

Learn more

Checkbox

placeholder, blank area with an gray background color

Checkbox is a form control for single and multiple selections.

Learn more

CheckboxGroup

placeholder, blank area with an gray background color

CheckboxGroup renders a set of Checkboxes.

Learn more

CircleBadge

CircleBadge visually connects logos of third-party services, eg. in the marketplace.

Learn more

CircleOcticon

Use CircleOcticon 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.

Learn more

CounterLabel

placeholder, blank area with an gray background color

Adds a count to navigational elements and buttons.

Learn more

DataTable

placeholder, blank area with an gray background color

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

Learn more

Details

placeholder, blank area with an gray background color

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

Learn more

Dialog

placeholder, blank area with an gray background color

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

Learn more

FormControl

placeholder, blank area with an gray background color

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

Learn more

Heading

placeholder, blank area with an gray background color

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

Learn more

IconButton

placeholder, blank area with an gray background color

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

Learn more

InlineMessage

placeholder, blank area with an gray background color

InlineMessage is used to inform the user about the result of an action within the content.

Learn more

Label

placeholder, blank area with an gray background color

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

Learn more

LabelGroup

placeholder, blank area with an gray background color

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

Learn more

Link

placeholder, blank area with an gray background color

Links are used to apply styles to hyperlink text.

Learn more

NavList

placeholder, blank area with an gray background color

NavList renders a vertical list of navigation links.

Learn more

Overlay

placeholder, blank area with an gray background color

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

Learn more

PageHeader

placeholder, blank area with an gray background color

PageHeader determines the top-level headings of a UI.

Learn more

PageLayout

placeholder, blank area with an gray background color

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

Learn more

Pagination

placeholder, blank area with an gray background color

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

Learn more

PointerBox

A customisable bordered box with a caret pointer

Learn more

Popover

placeholder, blank area with an gray background color

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

Learn more

ProgressBar

placeholder, blank area with an gray background color

A ProgressBar is a simple chart that can be used to show how complete something is, or visualize parts that make up a whole.

Learn more

Radio

placeholder, blank area with an gray background color

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

Learn more

RadioGroup

placeholder, blank area with an gray background color

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

Learn more

RelativeTime

placeholder, blank area with an gray background color

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

Learn more

SegmentedControl

placeholder, blank area with an gray background color

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

Learn more

Select

placeholder, blank area with an gray background color

Select is for choosing a single option from a dropdown menu of predefined choices.

Learn more

SelectPanel

placeholder, blank area with an gray background color

The SelectPanel 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.

Learn more

Skeleton loaders

placeholder, blank area with an gray background color

Replaces content while it's in a loading state.

Learn more

Spinner

placeholder, blank area with an gray background color

A Spinner is an indeterminate loading indicator, ideal for processes with unknown or variable durations.

Learn more

Split Page Layout

placeholder, blank area with an gray background color

Split Page Layout is a layout component that allows you to create a two-column layout with a main content area and a sidebar.

Learn more

Stack

placeholder, blank area with an gray background color

Stack is a layout component that creates responsive horizontal and vertical flows.

Learn more

StateLabel

placeholder, blank area with an gray background color

StateLabel is used for rendering the status of an issue or pull request.

Learn more

Text

placeholder, blank area with an gray background color

An abstraction for using Primer's typographic styles.

Learn more

Textarea

placeholder, blank area with an gray background color

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

Learn more

TextInput

placeholder, blank area with an gray background color

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

Learn more

TextInputWithTokens

placeholder, blank area with an gray background color

TextInputWithTokens is an input for a value that is a list.

Learn more

Timeline

placeholder, blank area with an gray background color

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

Learn more

ToggleSwitch

placeholder, blank area with an gray background color

ToggleSwitch is used to immediately toggle a setting on or off.

Learn more

Token

placeholder, blank area with an gray background color

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

Learn more

Tooltip

placeholder, blank area with an gray background color

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

Learn more

TreeView

placeholder, blank area with an gray background color

TreeView 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.

Learn more

Truncate

placeholder, blank area with an gray background color

Use Truncate to shorten overflowing text with an ellipsis.

Learn more

UnderlineNav

placeholder, blank area with an gray background color

The UnderlineNav is used to display navigation in a horizontal tabbed format.

Learn more

UnderlinePanels

placeholder, blank area with an gray background color

The UnderlinePanels are used to break related content into tabbed panels.

Learn more