Button is used to initiate actions on a page or form.
On this page
On this page
Buttons allow users to initiate an action or command when clicked or tapped. The button's label or text description indicates the purpose of the action to the user. At GitHub, buttons are a fundamental building block of our products. Most of the time, we use the "Default" button type, but other types of buttons may be used to indicate something special about the button's hierarchy or functionality.
An inactive button has styles that make the button appear "muted". The style is the same for all button variants.
An inactive button an accessible alternative to a disabled button. They're intended to be used for buttons that are non-functional, but cannot be removed from the page.
Unlike a disabled button, an inactive button can respond to user input. For example, if a button shows a tooltip when hovered or focused, or a dialog when clicked.
If you need to use an inactive button, it's best to have something else on the page that informs users about the issue that broke the button's normal functionality. For example, showing a global banner for service outages.
There are two recommended ways an inactive button should respond to user input:
- Show a dialog on click: When a user tries to activate an inactive the button, open a dialog that explains why the action cannot be completed and give them a path forward if possible. It is required to provide some kind of feedback when a user clicks a button.
- Show a tooltip on hover or focus: Before a user tries to activate a non-functional control, a tooltip with additional context may be displayed on hover or focus. It is not required to respond to hover and focus.
Limit primary button usage. Only use one primary button on the page, whenever possible, to indicate its emphasis relative to other actions. Primary buttons have top priority in visual hierarchy, and using too many of them on a single view dilutes their effectiveness.
Keep button labels succinct with no line breaks.
Buttons should never contain line breaks and lose their button shape.
Use sentence case for labels.
Don't use all-caps or other text formats.
Show focus styles on keyboard :focus
Don't remove default button :focus styles.
Do place primary buttons at the end of a button group
Don't place primary buttons at the start of a button group
Use a primary button with a secondary button
Don’t place multiple primary buttons together
There are rare cases where it's ok to disable a button, but it should generally be avoided. Disabling a button makes it invisible to assistive technologies such as screen readers.
For more information on disabled controls, see GitHub's link and button a11y guidance (GitHub staff only).
Labeling buttons properly lets users know what will happen when they activate the control, lessens errors, and increases confidence.
Read more about descriptive buttons.View open accessibility issues related to this component