--- title: Buttons path: components/buttons status: Stable source: 'https://github.com/primer/css/tree/main/src/buttons' bundle: buttons --- Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date. Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another. ```html live ``` Note: When using a ` Link button ``` ## Button types ### Default Use the standard — yet classy — `.btn` for form actions and general page actions. These are used extensively around the site. ```html live ``` ### 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`. ```html live ``` ### Outline Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go. ```html live ``` ### 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`. ```html live ``` ## Button states ### Selected Adding an `aria-selected="true"` attribute will keep the button in a selected state. Typically used for [`BtnGroups`](#button-groups). ```html live
``` ### Disabled Disable ` ``` ## Button variations ### Sizes Next to the default size there is also a `.btn-sm` (small) and `.btn-large` option. Use them to decrese or increase the button size. This is useful for fitting a button next to an input or turning a button into a prominent call to action in hero sections. [Type scale utilities](/support/typography#type-scale) 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 ``` Use `.btn-large` with a type scale utility to transform the text to a bigger size. ```html live
Large link 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 ``` ### Hidden text button Use `.hidden-text-expander` to indicate and toggle hidden text. ```html live ``` You can also make the expander appear inline by adding `.inline`. ## Button with icons Icons can be added to any button. ```html live ``` ### Icon-only button Icon-only buttons `.btn-octicon` 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 `.btn-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
Watch 6
``` 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
``` Use `BtnGroup-item btn btn-sm` for a smaller BtnGroup items. ```html live
``` Add `.BtnGroup-parent` to parent elements, like `
`s or `
`s, within `.BtnGroup`s for proper spacing and rounded corners. ```html live
```