Button Classes

Sizes

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.

<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.

<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.

<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>

Menu Buttons

Menu buttons are primarily used for menus, and come in only 3 sizes (Un-sized, small, and large). There are ways to use other sizes and this will be explained in the customisation section. When used with the menu button color helper classes they implement a focus color effect. See the example below.

<div class="tool-bar-sm background-accent-1 text-sm">
  <div class="content-col">
    <button type="button" class="menu-button-sm menu-button-accent-1">Menu Button 1</button>
  </div>
  <div class="content-col">
    <button type="button" class="menu-button-sm menu-button-accent-1">Menu Button 2</button>
  </div>
</div>
<div class="row-spacing-sm"></div>
<div class="tool-bar-lg background-accent-1 text-lg">
  <div class="content-col">
    <button type="button" class="menu-button-lg menu-button-accent-1">Menu Button 1</button>
  </div>
  <div class="content-col">
    <button type="button" class="menu-button-lg menu-button-accent-1">Menu Button 2</button>
  </div>
</div>

Menu buttons can also be arranged vertically and will expand to the width of the containing element.

<div class="background-accent-1">
  <div>
    <button type="button" class="menu-button-sm menu-button-accent-1">Menu Button 1</button>
  </div>
  <div>
    <button type="button" class="menu-button-sm menu-button-accent-1">Menu Button 2</button>
  </div>
</div>

Links

Menu button links are similar to menu buttons with a few important differences - they depend on line height as well as a fixed height, they don't expand to the width of the containing element by default, and use a pointer cursor. Like menu buttons, menu button links are available in only 3 sizes (un-sized, small , and large).

<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <a href="#0" class="menu-button-link menu-button-accent-1">Menu Button Link 1</a>
  </div>
  <div class="table-col">
    <a href="#0" class="menu-button-link-sm menu-button-accent-1">Menu Button Link 2</a>
  </div>
  <div class="table-col">
    <a href="#0" class="menu-button-link-lg menu-button-accent-1">Menu 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.

<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.

<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.

<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.

Nav Buttons

Nav buttons are designed to be used with the Navbar component, but can also be used independantly for other purposes. The Nav Button is an animated toggle button with settings for transition duration, color, and background color. The sizes available are small and large, matching the sizes for menu relatated components. See the examples below.

<div class="table-row text-sm background-secondary col-padding-md">
  <div class="table-col">
    <div class="nav-button-sm" id="navButtonExample1"></div>
  </div>
  <div class="table-col">
    <div class="nav-button-lg" id="navButtonExample2"></div>
  </div>
</div>

webui.ready(function() {

  ui("#navButtonExample1, #navButtonExample2").navButtonControl({ 
    transitionDuration: 300, 
    backgroundColor: "rgb(92, 107, 192)", 
    color: "#FFF"
  });

});