Configurations

Primary

The primary button styling is reserved for the most important call to action on the page. It should be applied sparingly to maximize effectiveness.

Code

            
              <button href="#" class="btn-primary">Primary Button</button>
            
          

Default

The default button styling should be applied to actions of medium importance or when there are multiple, equally important calls-to-action on the page, such as in a table.

Code

            
              <button href="#" class="btn-default">Default Button</button>
            
          

Accessibility

Ensure accessibility by using descriptive button labels for users using assistive technologies. Also, all buttons should only direct to one page and clearly state the page they direct to.