Media WebUI

Button Classes

Sizes

Classes
Height
button-xs , button-link-xs
1.5rem
button-sm , button-link-sm
1.75rem
button-md , button-link-md
2.125rem
button-lg , button-link-lg , view-button-sm , view-button-link-sm , menu-button-sm , menu-button-link-sm, nav-button-sm
2.375rem
button-xl , button-link-xl , view-button-lg , view-button-link-lg , menu-button-lg , menu-button-link-lg, nav-button-lg
2.75rem
button , button-link , view-button , view-button-link , menu-button , menu-button-link
Un-sized - expands with content

All button classes (except nav buttons) can be used without adding the suffix -xs, -sm, -md, -lg, -xl, etc., which means the height of the element will only expand to accomodate its content with a small amount of padding by default.

Button sizing

It is recommended that the height of buttons is not customised, since the height is preset to match other form controls such as textboxes and labels.

Styling

The simplest way to style buttons is to use 2 classes - one to set the button type and size, and another to specifying the button type and color. The syntax is [button type]-[button size] and [button type]-[button color]. The reason for requiring button type with color is because each button type includes different color behaviours, i.e. focus or hover effects.

NOTE: Nav buttons cannot be styled this way, but must be initialised with the required colors.

Example
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <button type="button" class="button-sm button-accent-1">Button 1</button>
  </div>
  <div class="table-col">
    <button type="button" class="menu-button-sm menu-button-accent-1">Button 2</button>
  </div>
  <div class="table-col">
    <button type="button" class="view-button-sm view-button-accent-1">Button 3</button>
  </div>		
</div>
Button Colors

The button color classes only include the basic color palette, so in order to use extended colors you can make use of the many color utility classes instead, such as color-focus-accent-2-light or background-hover-info-dark for example.

Buttons

The standard button is a natural choice for use in forms, but it can be used anywhere. Unlike the other button types, the width will adjust according to the button content. However, any of the WebUI width helper classes can be applied to suit your needs. The button height is controlled by specific button classes, as shown in the above table. When used with the button color helper classes they implement a hover color effect. See the example below.

Example
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <button type="button" class="button-xs button-info">Info</button>
  </div>
  <div class="table-col">
    <button type="button" class="button-md button-success">Success</button>
  </div>
  <div class="table-col">
    <button type="button" class="button-xl button-danger">Danger</button>
  </div>		
</div>

Links

Button links are similar to buttons with a couple of important differences - they depend on line height as well as a fixed height and use a pointer cursor.

Example
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <a href="#0" class="button-link button-accent-1">Button Link 1</a>
  </div>
  <div class="table-col">
    <a href="#0" class="button-link-md button-accent-1">Button Link 2</a>
  </div>
  <div class="table-col">
    <a href="#0" class="button-link-xl button-accent-1">Button Link 3</a>
  </div>	
</div>

View Buttons

View buttons are similar to menu buttons in behaviour, but do not have a colored background by default. Instead, view buttons have a transparent background and use a single side colored border which appears with button focus. The single side border by default is at the bottom, but can be on the left, top, or right, depending on a third utility class. View buttons are useful to implement a popular style of menu selection. View buttons come in only 3 sizes (Un-sized, small, and large). See the examples below.

Example
Markup
<div class="container background-secondary text-xs">
  <div class="content-col">
    <button type="button" class="view-button view-button-accent-1">View Button 1</button>
  </div>
  <div class="content-col">
    <button type="button" class="view-button-sm view-button-accent-1">View Button 1</button>
  </div>
  <div class="content-col">
    <button type="button" class="view-button-lg view-button-accent-1">View Button 2</button>
  </div>
</div>

View buttons can also be arranged vertically and will expand to the width of the containing element. In addition, the single side colored border can be set to appear on any single side of the button. Here is an example showing the view-button-left class being used.

Example
Markup
<div class="container background-secondary text-sm width-lg">
  <div>
    <button type="button" class="view-button-sm view-button-accent-5 view-button-left">View Button 1</button>
  </div>
  <div>
    <button type="button" class="view-button-sm view-button-accent-5 view-button-left">View Button 2</button>
  </div>
  <div>
    <button type="button" class="view-button-sm view-button-accent-5 view-button-left">View Button 3</button>
  </div>
</div>

Links

View button links are similar to view buttons with a few important differences - they depend on line height as well as a fixed height, don't expand to the width of the containing element, and use a pointer cursor by default. As with view buttons, you can change which side the colored border appears on.

Example
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <a href="#0" class="view-button-link view-button-accent-1">View Button Link 1</a>
  </div>
  <div class="table-col">
    <a href="#0" class="view-button-link-sm view-button-accent-1 view-button-top">View Button Link 2</a>
  </div>
  <div class="table-col">
    <a href="#0" class="view-button-link-lg view-button-accent-1 view-button-left">View Button Link 3</a>
  </div>	
</div>
Flexbox Properties

It is important to note that un-sized buttons and link buttons may be affected by flex properties of a parent element or container. This is because a flex parent may stretch the height or width of un-sized elements.

To avoid this, care should be taken with regard to flex inheritance. You can easily avoid this by enclosing the buttons with a non-flex column or container.