Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.
Use the standard—yet classy—
.btn for form actions and primary page actions. These are used extensively around the site.
When using a
<button> element, always specify a
type. When using a
<a> element, always add
role="button" for accessibility.
You can find them in two sizes: the default
.btn and the smaller
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
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
Outline buttons downplay an action as they appear like boxy links. Just add
.btn-outline and go.
.btn-large to increase the padding and border radius of a button. This is useful for prominent calls 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.
<button> elements with the boolean
disabled attribute and
<a> elements with the
Similar styles are applied to primary, danger, and outline buttons:
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.
You can easily append a count to a small button. Add the
.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.
<div class="clearfix"> <a class="btn btn-sm btn-with-count" href="#url" role="button"> <%= octicon "eye" %> Watch </a> <a class="social-count" href="#url">6</a> </div>
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-parent to parent elements, like
.BtnGroups for proper spacing and rounded corners.
.hidden-text-expander to indicate and toggle hidden text.
You can also make the expander appear inline by adding