Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
lib
.npmignore
LICENSE
README.md
index.scss
package.json
stories.js

README.md

Primer Marketing 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 repository.

Documentation

Marketing buttons extend primer-core buttons with more color and fill styles.

Colors

Marketing buttons are available in orange.

<button class="btn btn-orange" type="button">Button button</button>

Outline button colors

The btn-outline has also been extended with orange, purple, and green.

<button class="btn btn-outline-orange" type="button">Button button</button>
<a class="btn btn-outline-purple" href="#url" role="button">Link button</a>
<button class="btn btn-outline-green" type="button">Button button</button>

Transparent button

A button can also be transparent and displayed with a white border with btn-transparent.

<div class="bg-gray-dark p-4 mt-4">
  <button class="btn btn-transparent" type="button">
    Button button
    <span class="Counter">12</span>
  </button>
</div>

Install

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

$ npm install --save primer-marketing-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-marketing-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

$ npm run build

License

MIT © GitHub