mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-16 16:12:23 -06:00
a789198b20
In touching up the migration guide, I noticed that many of our documentation site links are broken! For example, on the homepage, this link: <img width="782" alt="screenshot of homepage; code snippet is in next block" src="https://user-images.githubusercontent.com/14893287/210462690-31aa7bf5-dd79-4e8f-a3c5-1213e73771c4.png"> which has the following href ```code <a href="/just-the-docs/just-the-docs/CHANGELOG/">the CHANGELOG</a> ``` duplicates the `baseurl` twice. There are 14 such broken links across the site. Each link duplicates the `baseurl` and `link` tags, which has since been resolved with links being relative by default (there's a set of PRs that document this - I can't find the exact paper trail right now). To resolve this, I: - find and replace site-wide `{{ site.baseurl }}{% link` with `{% link` - tested each link, which now works properly locally *and* on the deploy preview I'm surprised we didn't catch this earlier! I also could be missing something else, in which case feedback on this PR is certainly welcome.
2.3 KiB
2.3 KiB
layout, title, parent, nav_order
| layout | title | parent | nav_order |
|---|---|---|---|
| default | Buttons | UI Components | 2 |
Buttons
{: .no_toc }
Table of contents
{: .no_toc .text-delta }
- TOC {:toc}
Basic button styles
Links that look like buttons
[Link button](http://example.com/){: .btn }
```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 }
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]({% 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]({% 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 }
```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 }
Button with more space{: .btn .btn-green .mr-4 } Button{: .btn .btn-blue }