Components

Buttons

Buttons are to be used in various places to carry out an action. There are different types of buttons and can be used at discretion.

You should use a normal link if it is not the primary action or call to action on the page.

Example

                                
                                <a href="/" title="This is the button title" class="button button--primary">Continue</a>
<a href="/" title="This is a secondary type of button" class="button button--secondary mtop-20">This is a secondary button with text</a>

Portal Code example

  • Buttons used for next and back controls are out of the box provided, and the markup containing it is as per bootstrap documentation of btn-groups
  • Buttons used in form controls that are outside of out of the box, should adhere to button standards and use the with class names
  • Button styles that are used as jump points (links) should use link tag with class names.

Button as part of out of box

HTML button on portal

Using a link tag Button title

Using a button tag

                        
                        <h2>Button as part of out of box</h2>
<div role="group" class="btn-group entity-action-button mt-2">
<input type="button" name="button name" value="Continue" class="btn btn-primary next">
</div>

<input type="button" name="button name" value="Update" class="btn btn-primary">

<h2>HTML button on portal</h2>
<h3>Using a  <code><a>link tag</a></code> 
<a href="/" class="btn btn-primary" title="Title of the button">Button title</a>
<h3> Using a  button tag</h3>
<button type="submit" class="btn btn-primary">Button title</button>

When to use this

  • When you need to create an action for the user like starting a transaction
  • for pagination buttons of next and previous.

When not to use this

If you are trying to simply link to another page.

About this

  • use “Continue” if they are progressing through to the next step of a transactional journey
  • Only use 1 primary action per page, if unable to do so then you should split your journey up on to multiple page
  • Secondary button should be complimentary and serve the secondary (optional) purpose of the page.
Back to top