Skip to content

Buttons

Stable

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. When using a <a> element, always add role="button" for accessibility.

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

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:

Button groups

Have a hankering for a series of buttons that are attached to one another? Wrap them in a .BtnGroup and the buttons will be rounded and spaced automatically.

Use BtnGroup-item btn btn-sm for a smaller BtnGroup items.

Add .BtnGroup-parent to parent elements, like <form>s or <details>s, within .BtnGroups for proper spacing and rounded corners.

Edit this page on GitHub
9 contributorssimuraisaintmaliktobiasahlinjonrohanneildanielsashygeeyailisophshepcolebemis
Last edited by simurai on September 17, 2021