| Type | Class Names |
|---|---|
| base | button |
| type | button--primary, button--secondary, button--success, button--info, button--warning, button--error, button--outline-primary, button--outline-secondary, button--outline-success, button--outline-info, button--outline-warning, button--outline-error |
| shape | button--pill, button--rounded, button--circle |
| size | button--md (default), button--xs, button--sm, button--lg, button--xl |
Type
Primary
[BUTTON](#){:.button.button--primary.button--pill}
<a class="button button--primary button--pill" href="">BUTTON</a>
Secondary
[BUTTON](#){:.button.button--secondary.button--pill}
<a class="button button--secondary button--pill" href="">BUTTON</a>
Success
[BUTTON](#){:.button.button--success.button--pill}
<a class="button button--success button--pill" href="">BUTTON</a>
Outline
[BUTTON](#){:.button.button--outline-success.button--pill}
<a class="button button--outline-success button--pill" href="">BUTTON</a>
Shape
Pill
[BUTTON](#){:.button.button--primary.button--pill}
<a class="button button--primary button--pill" href="">BUTTON</a>
Rounded
[BUTTON](#){:.button.button--primary.button--rounded}
<a class="button button--primary button--rounded" href="">BUTTON</a>
Circle
[X](#){:.button.button--primary.button--circle}
<a class="button button--primary button--circle" href="">X</a>
Size
Extreme Small
[BUTTON](#){:.button.button--primary.button--rounded.button--xs}
<a class="button button--primary button--rounded button--xs" href="">BUTTON</a>
Small
[BUTTON](#){:.button.button--primary.button--rounded.button--sm}
<a class="button button--primary button--rounded button--sm" href="">BUTTON</a>
Middle
[BUTTON](#){:.button.button--primary.button--rounded}
<a class="button button--primary button--rounded" href="">BUTTON</a>
Large
[BUTTON](#){:.button.button--primary.button--rounded.button--lg}
<a class="button button--primary button--rounded button--lg" href="">BUTTON</a>
Extreme Large
[BUTTON](#){:.button.button--primary.button--rounded.button--xl}
<a class="button button--primary button--rounded button--xl" href="">BUTTON</a>