UI patterns

Button usage

Buttons are a fundamental building block of the GitHub UI. These guidelines summarize how to use buttons across the product.

Dates and times

Dates and times are used to provide context and information about when something happened or will happen. These guidelines summarize how to use dates and times across the product.

Empty states

Empty states are used to fill spaces when no content has been added yet, or is temporarily empty due to the nature of the feature. These guidelines demonstrate best practices for using the blankslate component and designing empty states.

Feature onboarding

Onboarding is a virtual unboxing experience that helps users get started with a feature. This is a guide for designing onboarding for the product and does not include what to do for marketing pages, email announcements, social media, etc.

Forms

Forms are used to complete tasks that require data input from the user. These guidelines aim to minimize the effort and cognitive load required to complete a task that involves a form.

Messaging

Messaging components are used to provide important and relevant information to the user, including feedback, contextual information, product updates, and more. Primer includes three different messaging components: toasts, flash alerts, popovers.

Progressive disclosure

These guidelines summarize how to use progressive disclosure, as well as guiding principles, best practices, and implementation support.

Saving

Saving and submitting data is critical to task completion. Use these guidelines to ensure your workflows are consistent and accessible.