Buttons

Buttons communicate actions that users can take. They allow users to make choices with one single tap.

Each button should have a proper label or/and icon. The meaning should be clear and always tie back to what it will do for the user because users feel more comfortable when they understand what action a button does. Tell users what the outcome will be after pressing the button. Such explicit labeling serves as just-in-time help, giving users confidence in selecting the action.

I Am a Flashy Button Just Waiting To Be Clicked
  1. Button Types
  2. Elements
  3. Disabling Buttons
  4. Buttons with Icons
  5. Buttons with Standalone Icons
  6. Text Button/Link Text
  7. Button Widths
  8. Optional Button Margin

Button Types

Primary Button

Primary Buttons have a high emphasis on a page. Use primary buttons to drag a user’s attention; it should contain the main user action. A secondary next to a primary is a good partner to offer users a choice. Primary button is the type of button you will get when applying button-primary.

Primary button

				

				

					

						
					

				

			

		


		
Secondary Button

		

			Secondary buttons are kind of standard buttons on IS24.
		


		

			
Secondary button

			

				



				

				

					

						
					

				

			

		


		
Tertiary Button

		

			Tertiary buttons are usually used for miscellaneous actions.
		


		

			
Tertiary Button

			

				



				

				

					

						
					

				

			

		


		
Ghost Button

		

			Ghost buttons are tertiary buttons on IS24.
		


		

			
Ghost button

			

				



				

				

					

						
					

				

			

		

	


	

		
Elements

		
Buttons can be made from

		
    
			
  • Button elements (<button>),
    • 
			
  • Links (<a>), and
    • 
			
  • form submit buttons (<input type="submit" />).
    • 
		

		

			
Same button, different elements

			

				



				

				

					
				

			

			

				



				

				

					

						
					

				

			

			

				



				

				

					

						
					

				

			

		

	


	

		
Disabling Buttons

		

			You can make buttons semantically disabled through the disabled attribute, making them unclickable and showing their disabled state. You can also just make them look disabled to show the user that they are temporarily disabled by appending the disabled class.
		


		

			Disabled buttons should be avoided and only used in special cases. It is unideal to show users a button which they cannot activate and probably don’t know how to. Please consider using a default button instead and show via validation what users need to do to proceed.
		


		

			
Disabled buttons

			

				


<button class="button disabled">Disabled Button</button><br />


				

				

					

						

					

				

			

		

		

			
Disabled form button

			

				


<input type="submit" class="button-primary"
       value="Disabled Submit Button" disabled />


				

				

					

						
					

				

			

		

	


	

		
Buttons with Icons

		

			Buttons can be decorated with icons. This allows you to build buttons with a wide range of contextual icons on demand without the need to
			have a specific button designed and implemented.
		

		

			
			Use buttons with icons whenever the button needs more visibility. Select icons with care. The icon needs to fit the button’s label and purpose.
		

		

			
Buttons with icons

			

				



				

				

					
				

			

		

		

			
			Please note that icons are only available on buttons that are based on <a> or <button> elements.

			<input> buttons (as in form submits) cannot have icons due to technological limitations of the
			<input> element.
		

	


	

		
Buttons with Standalone Icons

		

			If you have very little space to work with, use button-icon-standalone to show a button with nothing but a standalone icon.
		

		

			Be sure to describe the purpose of the button through the title and aria-label attributes, or equivalent, to help out screen readers and other assistive tools.
		

		

			
			For the sake of a consistent user experience, do this only where strictly necessary. Prefer regular buttons with icon and text wherever possible.
		


		

			
Icon standalone button

			

				



				

				

					

						
					

				

			

		

	


	

		
Text Button/Link Text

		

			You can also style buttons to look like plain text links. This way, you can choose the most appropriate semantic element for your use case.
		

		

			
Link Text

			

				



				

				

					

						
					

				

			

		

	


	

		
Button Widths

		

			By default, buttons will be just as wide as they need to be for the text to fit. However, if they directly follow blocky elements,
			it may be desirable to have them aligned on both sides with the preceding element.
		

		

			In such cases, you can use the width classes as you would on any other element. The button will then be inflated
			to the specified size, while the text will stay centered.
		

		

			
Wide button

			

				


<input type="text" class="input-text one-whole" placeholder="Some input" />
<button class="button-primary one-whole button-margin-vertical">
    Wiiide Button
</button>


				

				

					

						
						
					

				

			

		

	


	

		
Optional Button Margins

		

			By default, buttons come without margins applied to them. Your designer might require you to use the default margins around your buttons, though. If that is the case, use the class button-margin or any of the following, depending on your use case:
			
    
				
  • 
					button-margin-left
				
    • 
				
  • 
					button-margin-right
				
    • 
				
  • 
					button-margin-horizontal
				
    • 
				
  • 
					button-margin-top
				
    • 
				
  • 
					button-margin-bottom
				
    • 
				
  • 
					button-margin-vertical
				
    • 
			

		

		

			

				Optional button margins (background added for emphasis)
			

			

				


<a class="button-secondary button-margin">
	Button With Margins Applied
</a>