9.0 KiB
Primer CSS Buttons
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">…</button>
</span>
You can also make the expander appear inline by adding .inline.