Action bar contains a collection of horizontally aligned icon buttons.
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 is composed of action list and overlay patterns used for quick actions and selections.
Anchored overlay opens an overlay relative to the anchor position.
Autocomplete allows users to quickly filter through a list of options and pick one or more values for a field.
Avatar is an image that represents a user or organization.
Avatar pair is composed of two avatars, one larger one and a smaller one, overlaid slightly.
Avatar stack displays two or more avatars in an inline stack.
Box is a basic wrapper component for most layout related needs.
Branch name is a label-type component rendered as an <a> tag by default that displays the name of a branch.
Breadcrumbs display the current page or context within the site, allowing them to navigate different levels of the hierarchy.
Button is used to initiate actions on a page or form.
Button group renders a series of buttons.
Checkbox is a form control for single and multiple selections.
Checkbox group renders a set of checkboxes.
Copies element text content or input values to the clipboard.
Comment box allows users to write and preview comments.
Counter label is a button with a numbered label accompanied by text.
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 is a styled component to enhance the native behaviors of the <details> element.
Dialog is a floating surface used to display transient content such as confirmation actions, selection options, and more.
Filter input is an input that provides suggestions through qualifiers and highlights complex filter syntax.
Flash alert informs users of successful or pending actions.
Form control displays a labelled input and, optionally, associated validation text and/or hint text.
Heading defines the hierarchical structure and importance of the content they contain.
Use the label component to add contextual metadata to a design.
Icons at GitHub are called Octicons, which are available in various implementations including React, Figma, Rails, and Styled System.
Icon button is used for buttons that show an icon in place of a text label.
Use image to render images.
Use image crop as a client-side mechanism to crop images.
Links are used to apply styles to hyperlink text.
Use markdown to wrap markdown content.
Nav list renders a vertical list of navigation links.
Page header determines the top-level headings of a UI.
Pagination is a horizontal set of links to navigate paginated content.
Popover is used to bring attention to specific user interface elements.
Progress bar visualizes one or more parts of a whole.
Segmented control is used to pick one choice from a linear set of closely related choices, and immediately apply that selection.
Radio button is a form control for making a single selection from a short list of options.
Radio group is used to render a short list of mutually exclusive options.
Relative time displays time in a way that is clear, concise, and accessible.
Select is an input for selecting a single option from a menu.
Select panel is a semantic dialog that allows for complex selection options within an overlay.
Use state for rendering the status of an item.
Use subhead as the start of a section.
Use tab container to create tabbed content with keyboard support.
Tab nav contains a set of links that let users navigate between different views in the same context.
Tab panels let users switch between views in the same context.
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 is used to set a value that is multiple lines of text.
Toggle switch is used to immediately toggle a setting on or off.
Token is a compact representation of an object, and is typically used to show a collection of related metadata.
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.
The UnderlineNav is used to display navigation.