--- title: Buttons path: components/buttons status: Stable source: 'https://github.com/primer/css/tree/master/src/buttons' bundle: buttons --- Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another. ## Default button Use the standard—yet classy—`.btn` for form actions and primary page actions. These are used extensively around the site. When using a ` Link button ``` You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`. ```html live ``` ## Primary button 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`. ```html live ``` ## Danger button 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`. ```html live ``` ## Outline button Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go. ```html live ``` ## Large button Use `.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](https://styleguide.github.com/primer/utilities/typography/#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. ```html live Large link button ``` Use `.btn-large` with a type scale utility to transform the text to a bigger size. ```html live

Large link button

``` ## Disabled state Disable ` Disabled button ``` Similar styles are applied to primary, danger, and outline buttons: ```html live Disabled button ``` ```html live Disabled button ``` ```html live Disabled button ``` ## Block button 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. ```html live ``` ## Link button Create a button that looks like a link with `.btn-link`. Rather than using an `` to trigger JS, this style on a ` ``` ## Invisible button When you want a link, but you want it padded and line heighted like a button best for "cancel" actions on forms. ```html live ``` ## Octicon button Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover. ```html live ``` ## Close button When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles. ```html live ``` ## Button 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.** ```html live

``` You can also use the [counter](./labels#counters) component within buttons: ```html live ``` ## 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. ```html live

``` Add `.BtnGroup-parent` to parent elements, like `