Buttons

Basic button utilities including size modifiers, button group utilities and pagination styles.

Examples (anchor)

The button styles can be customized before compiling using Sass or in real-time with CSS variables.

Button utility (anchor)

The .btn utility replicates the default button styles and variables included with the forms and buttons to provide design continuity if using and customizing both style modules.

Link

<a href="#" class="btn">Link</a>
<button>Button</button>

If the forms and buttons are not included the .btn utility can be used to apply the styles:

<button class="btn">Button</button

Outline buttons (anchor)

Link

<a href="#" class="btn btn-outline">Link</a>
<button class="btn-outline">Button</button>

Button sizes (anchor)

<button class="btn-xs">Extra small</button>
<button class="btn-sm">Small</button>
<button>Normal</button>
<button class="btn-lg">Large</button>
<button class="btn-xl">Extra large</button>

Button groups (anchor)

Button groups can be included as individual buttons and links and/or using ordered and unordered lists:

<div class="btn-group">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<ol class="btn-group">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ol>

For vertical button groups a column style is also included:

<div class="btn-group-column">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<ul class="btn-group-column">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ul>

Button flex (anchor)

A simple flex wrap container for individual buttons or links and/or ordered and unordered lists:

<div class="btn-flex">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<ol class="btn-flex">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ol>

Buttons can also be grouped with a flex column style:

<div class="btn-flex-column">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<ol class="btn-flex-column">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ol>

Pagination buttons (anchor)

Previous and next pagination icon buttons (designed to meet accessibility requirements) can also be included with either the button group or flex utilities if required.

Previous page 1 2 3 Next page

<div class="btn-group">
  <a href="#" class="btn btn-previous"><span>Previous page</span></a>
  <a href="#" class="btn">1</a>
  <a href="#" class="btn">2</a>
  <a href="#" class="btn">3</a>
  <a href="#" class="btn btn-next"><span>Next page</span></a>
</div>
<ul class="btn-flex">
  <li><a href="#" class="btn btn-previous"><span>Previous page</span></a></li>
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
  <li><a href="#" class="btn btn-next"><span>Next page</span></a></li>
</ul>

Up and down icon buttons are provided for the vertical column utilities*:

Previous page 1 2 3 Next page

<div class="btn-group-column">
  <a href="#" class="btn btn-up"><span>Previous page</span></a>
  <a href="#" class="btn">1</a>
  <a href="#" class="btn">2</a>
  <a href="#" class="btn">3</a>
  <a href="#" class="btn btn-down"><span>Next page</span></a>
</div>
<div class="btn-flex-column">
  <a href="#" class="btn btn-up"><span>Previous page</span></a>
  <a href="#" class="btn">1</a>
  <a href="#" class="btn">2</a>
  <a href="#" class="btn">3</a>
  <a href="#" class="btn btn-down"><span>Next page</span></a>
</div>

*These currently only work correctly with individual buttons or links as shown above due to a (currently) unresolved display issue when using the buttons with the ordered or unordered list grouped styles.

Fixed light and dark (anchor)

Link button light Link button dark

<a href="#" class="btn btn-light">Link button light</a>
<a href="#" class="btn btn-dark">Link button dark</a>
<button class="btn btn-light">HTML button light</button> 
<button class="btn btn-dark">HTML button dark</button>

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

custom.scss

@use "stylemods/scss" as *;
@include buttons-css;

See the using modules page for more information.

Using the framework (anchor)

Using the recommended custom setup enable the styles in an overrides document:

overrides.scss

@use "stylemods/scss/configuration" as *;
$enable-buttons: true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss

@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information.

Source code (anchor)

The Buttons source file is included with the components module files, you can view the source code from the latest release (v1.5.0) via the Github link below.

Source document: stylemods/scss/components/buttons.scss
View on Github: https://github.com/pmbrown/StyleMods/blob/main/scss/components/buttons.scss

Shared documentation about how to customize the default property values for the styles using the Sass and CSS variables is provided on the customizing page.