notes/docs/ui-components/buttons.md

layout	title	parent	nav_order
default	Buttons	UI Components	2

Buttons

{: .no_toc }

Table of contents

{: .no_toc .text-delta }

1. TOC {:toc}

---

Basic button styles

Links that look like buttons

[Link button](http://example.com/){: .btn }

Link button{: .btn .btn-purple } Link button{: .btn .btn-blue } Link button{: .btn .btn-green }

Link button{: .btn .btn-outline }

```markdown [Link button](http://example.com/){: .btn }

Link button{: .btn .btn-purple } Link button{: .btn .btn-blue } Link button{: .btn .btn-green }

Link button{: .btn .btn-outline }

### Button element

GitHub Flavored Markdown does not support the `button` element, so you'll have to use inline HTML for this:

<div class="code-example">
<button type="button" name="button" class="btn">Button element</button>
</div>
```html
<button type="button" name="button" class="btn">Button element</button>

---

Using utilities with buttons

Button size

Wrap the button in a container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:

[Big ass button](http://example.com/){: .btn } [Tiny ass button](http://example.com/){: .btn }

```markdown [Link button](http://example.com/){: .btn } [Tiny ass button](http://example.com/){: .btn } ```

Spacing between buttons

Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/layout.md %}#spacing) to add spacing between two buttons in the same block.

[Button with space](http://example.com/){: .btn .btn-purple .mr-2 } [Button ](http://example.com/){: .btn .btn-blue .mr-2 }

Button with more space{: .btn .btn-green .mr-4 } Button {: .btn .btn-blue }

```markdown [Button with space](http://example.com/){: .btn .btn-purple .mr-2 } [Button ](http://example.com/){: .btn .btn-blue }

Button with more space{: .btn .btn-green .mr-4 } Button {: .btn .btn-blue }