GitHub and Government

Primer CSS Buttons

npm version Build Status

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

This repository is a module of the full primer-css repository.

Install

This repository is distributed with npm. After installing npm, you can install primer-buttons with this command.

$ npm install --save primer-buttons

Usage

The source files included are written in Sass (scss) You can simply point your sass include-path at your node_modules directory and import it like this.

@import "primer-buttons/index.scss";

You can also import specific portions of the module by importing those partials from the /lib/ folder. Make sure you import any requirements along with the modules.

Build

For a compiled css version of this module, a npm script is included that will output a css version to build/build.css The built css file is also included in the npm package.

$ npm run build

Documentation

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

Buttons

<button class="m-1 btn" type="button">Close</button>
<button class="m-1 btn btn-primary" type="button">Comment</button>
<button class="m-1 btn btn-danger" type="button">Rename repository</button>
<button class="m-1 btn btn-blue" type="button">Sign up for free</button>
<button class="m-1 btn btn-purple" type="button">Try if for free</button>
<br>
<button class="m-1 btn hover" type="button">Close</button>
<button class="m-1 btn btn-primary hover" type="button">Comment</button>
<button class="m-1 btn btn-danger hover" type="button">Rename repository</button>
<button class="m-1 btn btn-blue hover" type="button">Sign up for free</button>
<button class="m-1 btn btn-purple hover" type="button">Try if for free</button>
<br>
<button class="m-1 btn focus" type="button">Close</button>
<button class="m-1 btn btn-primary focus" type="button">Comment</button>
<button class="m-1 btn btn-danger focus" type="button">Rename repository</button>
<button class="m-1 btn btn-blue focus" type="button">Sign up for free</button>
<button class="m-1 btn btn-purple focus" type="button">Try if for free</button>
<br>
<button class="m-1 btn selected" type="button">Close</button>
<button class="m-1 btn btn-primary selected" type="button">Comment</button>
<button class="m-1 btn btn-danger selected" type="button">Rename repository</button>
<button class="m-1 btn btn-blue selected" type="button">Sign up for free</button>
<button class="m-1 btn btn-purple selected" type="button">Try if for free</button>
<br>
<button class="m-1 btn disabled" type="button">Close</button>
<button class="m-1 btn btn-primary disabled" type="button">Comment</button>
<button class="m-1 btn btn-danger disabled" type="button">Rename repository</button>
<button class="m-1 btn btn-blue disabled" type="button">Sign up for free</button>
<button class="m-1 btn btn-purple disabled" type="button">Try if for free</button>

Default buttons

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.

<button class="btn" type="button">Button button</button>
<a class="btn" href="#url" role="button">Link button</a>

You can find them in two sizes: the default .btn and the smaller .btn-sm.

<button class="btn" type="button">Button</button>
<button class="btn btn-sm" type="button">Small button</button>

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.

<button class="btn btn-primary" type="button">Primary button</button>
<button class="btn btn-sm btn-primary" type="button">Small primary button</button>

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 class="btn btn-danger" type="button">Danger button</button>
<button class="btn btn-sm btn-danger" type="button">Small danger button</button>

Outline

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

<button class="btn btn-outline" type="button">Outline button</button>
<button class="btn btn-sm btn-outline" type="button">Outline button</button>

Disabled state

Disable <button> elements with the boolean disabled attribute and <a> elements with the .disabled class.

<button class="btn" type="button" disabled>Disabled button</button>
<a class="btn disabled" href="#url" role="button">Disabled button</a>

Similar styles are applied to primary, danger, and outline buttons:

<button class="btn btn-primary" type="button" disabled>Disabled button</button>
<a class="btn btn-primary disabled" href="#url" role="button">Disabled button</a>
<button class="btn btn-danger" type="button" disabled>Disabled button</button>
<a class="btn btn-danger disabled" href="#url" role="button">Disabled button</a>
<button class="btn btn-outline" type="button" disabled>Disabled button</button>
<a class="btn btn-outline disabled" href="#url" role="button">Disabled button</a>

Block buttons

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.

<p><button class="btn btn-block" type="button">Block button</button></p>
<p><button class="btn btn-sm btn-block" type="button">Small block button</button></p>

With counts

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:

<button class="btn" type="button">
  Button
  <span class="Counter">12</span>
</button>

<button class="btn btn-primary" type="button">
  Button
  <span class="Counter">12</span>
</button>

<button class="btn btn-danger" type="button">
  Button
  <span class="Counter">12</span>
</button>

<button class="btn btn-outline" type="button">
  Button
  <span class="Counter">12</span>
</button>

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.

<div class="BtnGroup mr-2">
  <button class="btn BtnGroup-item" type="button">Button</button>
  <button class="btn BtnGroup-item" type="button">Button</button>
  <button class="btn BtnGroup-item" type="button">Button</button>
</div>

<div class="BtnGroup mr-2">
  <button class="btn BtnGroup-item btn-outline" type="button">Button</button>
  <button class="btn BtnGroup-item btn-outline" type="button">Button</button>
  <button class="btn BtnGroup-item btn-outline" type="button">Button</button>
</div>

<div class="BtnGroup">
  <button class="btn BtnGroup-item btn-sm" type="button">Button</button>
  <button class="btn BtnGroup-item btn-sm" type="button">Button</button>
  <button class="btn BtnGroup-item btn-sm" type="button">Button</button>
</div>

Add .BtnGroup-form to <form>s within .BtnGroups for proper spacing and rounded corners.

<div class="BtnGroup">
  <button class="btn BtnGroup-item" type="button">Button</button>
  <form class="BtnGroup-form">
    <button class="btn BtnGroup-item" type="button">Button in a form</button>
  </form>
  <button class="btn BtnGroup-item" type="button">Button</button>
  <button class="btn BtnGroup-item" type="button">Button</button>
</div>

Hidden text button

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

<span class="hidden-text-expander">
  <button type="button" class="ellipsis-expander" aria-expanded="false">&hellip;</button>
</span>

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

License

MIT © GitHub