Skip to Navigation
Navigation menu

User Experience Toolkit

Buttons

How to implement and properly style different types of buttons.

Default Implementation

Example:

Link Button Link Button

HTML: 
<!-- Anchor Buttons -->
<a class="button no-icon">Link Button</a>
<a class="button_mini no-icon">Link Button</a>

<!-- Input Buttons -->
<input class="button no-icon" type="button" value="Input Button" />
<input class="button_mini no-icon" type="button" value="Input Button" />

Within the UX Toolkit both anchor (a) tags and input tags can be styled to appear like buttons. In order to make this style appear, developers must add the class of button to the element. In the example above the additional class of no-icon was added to ensure proper padding. This class only needs to be added if the a developer does not want to include an icon. See the example below where icons are enabled.

Additional Buttons Styles

Options to change buttons style
Classes Desctiptions
primary Change the button to a more prominent color to indicate it as the primary action.
disabled Change the button to appear as if the button is disabled.
no-icon If no icon is to be defined, this class will remove the default padding applied to the left of the button text (example above).
[icon-name] Place an icon in the button to the left of the text. See the Icon Library page for a full list of avaliable buttons.
icon-right Place an icon in the button to the left of the text. See the Icon Library page for a full list of avaliable buttons.
icon-only Removed button text from visual users view.
text-only Removed all button styling. Only works on inputs.

These classes provide many additional styling tweeks to buttons to help indicate state and provide additional context. Please see the examples below for additional syntax reference.

Examples of Primary buttons

Example:

Link Button

HTML: 
<!-- Anchor Buttons -->
<a class="button primary no-icon">Link Button</a>

<!-- Input Buttons -->
<input class="button primary no-icon" type="button" value="Input Button" />

The primary button class many performs a change in color, so developers are free to mix and match the primary button style with other style without having to worry about styling conflicts.

Examples of Disabled buttons

Example:

Link Button

HTML: 
<!-- Anchor Buttons -->
<a class="button disabled no-icon">Link Button</a>

<!-- Input Buttons -->
<input class="button disabled no-icon" type="button" value="Input Button" />

The disabled class is just a styling, developers are still required to add any other appropriate classes in order to functionally disable a button.

Examples of Icon Buttons

Example:

Save Button Print Button Maginfy Button

HTML: 
<!-- Anchor Buttons -->
<a class="button save icon-only">Save Button</a>
<a class="button printer icon-only">Print Button</a>
<a class="button magnifier icon-only">Maginfy Button</a>

<!-- Input Buttons -->
<input class="button save no-icon" type="button" value="Save Button" />
<input class="button printer no-icon" type="button" value="Print Button" />
<input class="button magnifier no-icon" type="button" value="Maginfy Button" />

By default buttons are pre-styled and ready for an icon after adding the button class. In order to add an icon, simply declare the icon name class. To get a list of the possible icon and there class names to use, please reference the Icon Library page.

Examples of Icon Right Buttons

Example:



HTML: 
<!-- Anchor Buttons -->
<a class="button next icon-right">Save Button</a>

<!-- Input Buttons -->
<input class="button next no-right" type="button" value="Save Button" />

Examples of Icon Only Buttons

Example:

Save Button Print Button Maginfy Button

HTML: 
<!-- Anchor Buttons -->
<a class="button save icon-only">Save Button</a>
<a class="button printer icon-only">Print Button</a>
<a class="button magnifier icon-only">Maginfy Button</a>

<!-- Input Buttons -->
<input class="button save no-icon" type="button" value="Save Button" />
<input class="button printer no-icon" type="button" value="Print Button" />
<input class="button magnifier no-icon" type="button" value="Maginfy Button" />

Examples of Text Only Buttons

Example:


HTML: 
<!-- Input Buttons -->
<input class="button text-only" type="button" value="Text Button" />

This particular style is only applicable to input buttons. This will remove all styles and make inputs behavior similar to anchor tags.

Thanks for the feedback! It will help us improve your experience.