Buttons

Various button components to use in your project

Basic Use

1
  import Button from '@/components/mdx/Button.astro'

1
<Button class="btn" href="http://example.com/">Link Button</Button>

Basic button styles

Links that look like buttons

Link Button
Link Button Link Button Link Button Link Button Link Button

1
<Button class="btn" href="http://example.com/">Link Button</Button>
2

3
<Button class="btn btn-primary" href="http://example.com/">Link Button</Button>
4
<Button class="btn btn-secondary" href="http://example.com/">Link Button</Button>
5
<Button class="btn btn-secondary-light" href="http://example.com/">Link Button</Button>
6
<Button class="btn btn-primary-light" href="http://example.com/">Link Button</Button>
7
<Button class="btn btn-highlighter" href="http://example.com/">Link Button</Button>

Using utilities with buttons

Button size

Wrap the button in a container that uses the font-size utility classes to scale buttons:

Big Button Tiny Button

1
<Button class="btn btn-lg" href="http://example.com/">Big Button</Button>
2

3
<Button class="btn btn-sm" href="http://example.com/">Tiny Button</Button>

Spacing between buttons

Use the margin utility classes to add spacing between two buttons in the same block.

Button with space Button

Button with more space Button

1
<Button class="btn  mr-3" href="http://example.com/">Button with space</Button>
2
<Button class="btn" href="http://example.com/">Button</Button>
3

4
<Button class="btn mr-10" href="http://example.com/">Button with more space</Button>
5
<Button class="btn" href="http://example.com/">Button</Button>