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.
Use the standard — yet classy —
.btn for form actions and general page actions. These are used extensively around the site.
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
Outline buttons downplay an action as they appear like boxy links. Just add
.btn-outline and go.
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
aria-selected="true" attribute will keep the button in a selected state. Typically used for
<a> elements with the
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.
.btn-large with a type scale utility to transform the text to a bigger size.
Make any button full-width by adding
.btn-block. It adds
width: 100%;, changes the
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.
.btn-link class is not designed to be used with
.btn; the overlapping styles are not compatible.
When you want a link, but you want it padded and line heightened like a button best for "cancel" actions on forms.
.hidden-text-expander to indicate and toggle hidden text.
You can also make the expander appear inline by adding
Icons can be added to any button.
.btn-octicon turn blue on hover. Use
.btn-octicon-danger to turn an icon red on hover.
When using the
octicon-x icon for a close button, add
.close-button to remove the default button styles.
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:
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.
BtnGroup-item btn btn-sm for a smaller BtnGroup items.
.BtnGroup-parent to parent elements, like
.BtnGroups for proper spacing and rounded corners.