Style Guide version 1.1

Selection Button

Selection Buttons are a common pattern seen on the Questionnaire pages.

Selection Button
Retail

Selection Button in its deselected state.


	<button class="largeActiveButton">Cancel Subscription</button>		
	<button class="largeInactiveButton">Cancel Subscription</button> 	
	<button class="largeActiveButton">Submit</button> 	
	<button class="largeInactiveButton">Cancel</button>
Selection Button – Active
Retail

Selection Button in its Active state.


	<button class="largeActiveButton">Cancel Subscription</button>		
	<button class="largeInactiveButton">Cancel Subscription</button> 	
	<button class="largeActiveButton">Submit</button> 	
	<button class="largeInactiveButton">Cancel</button>
Selection Button – Grouped
Retail
Farming and agriculture
Construction
Professional and technical services
Manufacturing
Food and accommodation services
Finance and insurance
Real estate
Wholesale trade
Information technology
Art, entertainment, and recreation
Other

Selection Buttons grouped.


	<button class="largeActiveButton">Cancel Subscription</button>		
	<button class="largeInactiveButton">Cancel Subscription</button> 	
	<button class="largeActiveButton">Submit</button> 	
	<button class="largeInactiveButton">Cancel</button>
Selection Button (Two Lines of Text)
Food and accommodation services

When a Selection Button has a longer character count it will break into two lines. An example of this can be seen in Non-Disclosure Agreement and Child Medical Consent.


	<button class="largeActiveButton">Cancel Subscription</button>		
	<button class="largeInactiveButton">Cancel Subscription</button> 	
	<button class="largeActiveButton">Submit</button> 	
	<button class="largeInactiveButton">Cancel</button>
Selection Button (with Description)
Power of Attorney - Ordinary
Power of Attorney - Durable

A Selection Button can sometimes includes a description beneath it. The Non-Disclousre Agreement and Power of Attorney are examples of buttons with description text.


	<button class="largeActiveButton">Cancel Subscription</button>		
	<button class="largeInactiveButton">Cancel Subscription</button> 	
	<button class="largeActiveButton">Submit</button> 	
	<button class="largeInactiveButton">Cancel</button>