Skip to content
Primer/CSS
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactReact BrandViewComponents
ContributeAbout
On this page

Buttons

  • Stable
  • Not reviewed for accessibility
On this page

Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.

Note: When using a <button> element, always specify a type.

Button types

Default

Use the standard — yet classy — .btn for form actions and general page actions. These are used extensively around the site.

Primary

Primary buttons are green and are used to indicate the primary action on a page. When you need your buttons to stand out, use .btn.btn-primary. You can use it with both button sizes—just add .btn-primary.

Outline

Outline buttons downplay an action as they appear like boxy links. Just add .btn-outline and go.

Danger

Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add .btn-danger.

Button states

Selected

Adding an aria-selected="true" attribute will keep the button in a selected state. Typically used for BtnGroups.

Disabled

Disable <button> and <a> elements with the aria-disabled="true" attribute.

Button variations

Sizes

Next to the default size there is also a .btn-sm (small) and .btn-large option. Use them to decrease or increase the button size. This is useful for fitting a button next to an input or turning a button into a prominent call to action in hero sections.

Type scale utilities can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.

Use .btn-large with a type scale utility to transform the text to a bigger size.

Block button

Make any button full-width by adding .btn-block. It adds width: 100%;, changes the display from inline-block to block, and centers the button text.

Link button

Create a button that looks like a link with .btn-link. Rather than using an <a> to trigger JS, this style on a <button> should be used for better accessibility.

The .btn-link class is not designed to be used with .btn; the overlapping styles are not compatible.

Invisible button

When you want a link, but you want it padded and line heightened like a button best for "cancel" actions on forms.

Hidden text button

Use .hidden-text-expander to indicate and toggle hidden text.

You can also make the expander appear inline by adding .inline.

Button with icons

Icons can be added to any button.

Icon-only button

Icon-only buttons .btn-octicon turn blue on hover. Use .btn-octicon-danger to turn an icon red on hover.

Close button

When using the octicon-x icon for a close button, add .close-button to remove the default button styles.

Button with counts

You can easily append a count to a small button. Add the .btn-with-count class to the .btn-sm and then add the .social-count after the button.

Be sure to clear the float added by the additional class.

You can also use the counter component within buttons:

Edit this page on GitHub
10 contributorssimuraiichelseajsorefsaintmaliktobiasahlinjonrohanneildanielsashygeeyailicolebemis
Last edited by simurai on December 16, 2022