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 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/utilities.md %}#spacing) to add spacing between two buttons in the same block.

Button with space{: .btn .btn-purple .mr-2} Button {: .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 }