css/docs/buttons.md

layout	title
page	Buttons

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

Contents

• Will be replaced with the ToC, excluding the "Contents" header {:toc}

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.

{% example html %} Button button Link button {% endexample %}

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

{% example html %} Button Small button {% endexample %}

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.

{% example html %} Primary button Small primary button {% endexample %}

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.

{% example html %} Danger button Small danger button {% endexample %}

Outline

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

{% example html %} Outline button Outline button {% endexample %}

Disabled state

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

{% example html %} Disabled button Disabled button {% endexample %}

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

{% example html %} Disabled button Disabled button {% endexample %}

{% example html %} Disabled button Disabled button {% endexample %}

{% example html %} Disabled button Disabled button {% endexample %}

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.

{% example html %}

Block button

Small block button

{% endexample %}

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.

{% example html %}

Watch 6

{% endexample %}

You can also use the counter component within buttons:

{% example html %} Button 12

Button 12 Button 12 Button 12 {% endexample %}

Button groups

Have a hankering for a series of buttons that are attached to one another? Wrap them in a .btn-group and the buttons will be rounded and spaced automatically.

{% example html %}

Button Button Button

Button Button Button

Button Button Button

{% endexample %}

Add .button_to to <form>s within .btn-groups for proper spacing and rounded corners.

Heads up! This class name is inconsistent and will change in the next major version.

{% example html %}

Button in a form Button Button

{% endexample %}

Hidden text button

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

{% example html %} … {% endexample %}

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