Style Guide
Fork me on GitHub

Buttons

Wikia forms for everyday use. You can have them just for $1. Buy now and you will get one radio button for free.

Standard

Wikia corporate buttons are used in most cases when the interface calls for a button.

By default, all button elements will be styled. Using the disabled attribute will style it as inactive, as expected.

HTML
<button>Default</button>
<button>Hover</button>
<button disabled>Inactive</button>

Additionally, any a element will be styled as a button when given the button class. To disable such buttons, the disabled class needs to be used instead of the native disabled attribute. The following markup will produce the same styled buttons as the markup above:

HTML
<a class="button">Default</a>
<a class="button disabled">Inactive</a>

Secondary buttons are only used when there is an exceedingly distinct and clear call-to-action. An example of this is the "Vote" button on a poll, or a "Send" button in a form. Although appearing different in style, the color used for each state is the same as normal buttons.

HTML
<button class="secondary">Default</button>
<button class="secondary">Hover</button>
<button class="secondary" disabled>Inactive</button>

Sizes of buttons depend on the situation. Medium is the default size and is used in most cases. Add the large or small class to use a different size. Only the height changes with button size. All buttons use the same padding, and therefore width is only dependent on the length of the button label.

HTML
<button class="large">Large</button>
<button>Medium</button>
<button class="small">Small</button>

Icon Buttons

Left Side Navigation is a special case of an icon button. Behavior and interaction are the same.

Pagination