BUTTONS

JTB MD includes several types of buttons which allows users to take actions and make choices, with a single tap.

Types

There are two main types for buttons in JTB_MD; one of them is filled background with border, and the other one is transparent background with border only.

			Copy
			<button class='jtbButton'>Button</button>
<button class='jtbButton jtbButtonInverse'>Button</button>
		

Disabling

If you want to make the buttons disabled, just add a disabled class to the button.

			Copy
			<button class='jtbButton disabled'>Button</button>
<button class='jtbButton jtbButtonInverse disabled'>Button</button>
		

Sizes

There are 4 different button sizes in the JTB_MD. xs, sm, md, and lg. The default value for button size is md.


			Copy
			<button class='jtbButton jtbButton_lg'>Button</button>
<button class='jtbButton jtbButton_md'>Button</button>
<button class='jtbButton jtbButton_sm'>Button</button>
<button class='jtbButton jtbButton_xs'>Button</button><br>

<button class='jtbButton jtbButtonInverse jtbButton_lg'>Button</button>
<button class='jtbButton jtbButtonInverse jtbButton_md'>Button</button>
<button class='jtbButton jtbButtonInverse jtbButton_sm'>Button</button>
<button class='jtbButton jtbButtonInverse jtbButton_xs'>Button</button>
		

Rounding

Rounding corners are also available for the buttons.

			Copy
			<button class='jtbButton jtbButtonRounded'>Button</button>
<button class='jtbButton jtbButtonInverse jtbButtonRounded'>Button</button>
		

Icons

Icons are also usable inside the buttons. Just add the icon before | after your text.

			Copy
			<button class='jtbButton'><i class='jtb-arrow-left'></i> Button</button>
<button class='jtbButton'>Button <i class='jtb-arrow-right'></i></button>
		

Coloring

In JTB_MD, there are 9 different predefined coloring options for each button type.


			Copy
			<button class='jtbButton jtbButtonNavy'>Button</button>
<button class='jtbButton jtbButtonBlue'>Button</button>
<button class='jtbButton jtbButtonGray'>Button</button>
<button class='jtbButton jtbButtonGreen'>Button</button>
<button class='jtbButton jtbButtonRed'>Button</button>
<button class='jtbButton jtbButtonYellow'>Button</button>
<button class='jtbButton jtbButtonOrange'>Button</button>
<button class='jtbButton jtbButtonWhite'>Button</button>

<button class='jtbButton jtbButtonInverse jtbButtonNavy'>Button</button>
<button class='jtbButton jtbButtonInverse jtbButtonBlue'>Button</button>
<button class='jtbButton jtbButtonInverse jtbButtonGray'>Button</button>
<button class='jtbButton jtbButtonInverse jtbButtonGreen'>Button</button>
<button class='jtbButton jtbButtonInverse jtbButtonRed'>Button</button>
<button class='jtbButton jtbButtonInverse jtbButtonYellow'>Button</button>
<button class='jtbButton jtbButtonInverse jtbButtonOrange'>Button</button>
<button class='jtbButton jtbButtonInverse jtbButtonWhite'>Button</button>