Button Styling

The simplest way to style buttons is to use 2 classes - one to set the button size, and another to set the button 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 using the JavaScript configuration.

All buttons can be enhanced by adding the feedback-* classes. For more information about feedback classes, see the User Feedback Classes section.

<div class="row text-sm col-padding-md">
  <div class="col">
    <button type="button" class="button-sm button-info">Button 1</button>
  </div>
  <div class="col">
    <button type="button" class="menu-button-sm menu-button-info">Button 2</button>
  </div>
  <div class="col">
    <button type="button" class="view-button-sm view-button-info">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.

Button Classes

Classes available for buttons and their corresponding heights.

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.

Standard Buttons

The standard button is a natural choice for use in forms, but it can be used anywhere. Unlike menu buttons and view buttons, the width will adjust according to the button content. The width can be changed using any of the WebUI width helper classes available. The button height is controlled by specific button classes as shown in the table above. When used with the button color helper classes they implement a hover color effect. See the example below.

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

Button Links

Button links are similar to buttons in that they do not stretch to the width of their containing element, but only expand to their content with some padding. They are specifically for styling hyperlinks.

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

Standard Menu Buttons

Menu buttons are primarily used for menus, and come in only 3 sizes (Un-sized, small, and large). The width can be changed using the width helper classes, but by default menu buttons will stretch to the width of their containing element. When used with the menu button color helper classes they implement a focus color effect. See the example below.

The tool-bar-* classes can be used to fix the height of an element to match menu button heights. Toolbars are available in 3 sizes (un-sized, small , and large).

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

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

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

Menu Button Links

Menu button links are similar to menu buttons in that they stretch to the full width of their containing element. They are specifically for styling hyperlinks to be used in menus, and like the menu button are available in 3 sizes (un-sized, small and large).

<div class="row text-sm background-dark-alternate">
  <div class="col">
    <a href="#0" class="menu-button-link menu-button-info">Menu Button Link 1</a>
  </div>
  <div class="col-16">
  </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 and come in 3 sizes (Un-sized, small, and large). See the examples below.

<div class="row text-xs">
  <div class="col">
    <button type="button" class="view-button-sm view-button-success">View Button 1</button>
  </div>
  <div class="col">
    <button type="button" class="view-button-sm view-button-info">View Button 2</button>
  </div>
  <div class="col">
    <button type="button" class="view-button-sm view-button-accent-3">View Button 3</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="text-sm width-lg">
  <div>
    <button type="button" class="view-button-sm view-button-success view-button-left">View Button 1</button>
  </div>
  <div>
    <button type="button" class="view-button-sm view-button-info view-button-left">View Button 2</button>
  </div>
  <div>
    <button type="button" class="view-button-sm view-button-accent-3 view-button-left">View Button 3</button>
  </div>
</div>

View Button Links

View button links are similar to view buttons in that they stretch to the full width of their containing element. They are ideal for styling hyperlinks to be used in menus or tabs, and like the view button, are available in 3 sizes (un-sized, small , and large).

<div class="row text-sm col-padding-xs">
  <div class="col">
    <a href="#0" class="view-button-link view-button-info">View Button Link 1</a>
  </div>
  <div class="col">
    <a href="#0" class="view-button-link-sm view-button-info view-button-top">View Button Link 2</a>
  </div>
  <div class="col">
    <a href="#0" class="view-button-link-lg view-button-info view-button-left">View Button Link 3</a>
  </div>	
</div>

Flexbox Properties

It is important to note that un-sized buttons may be affected by flex properties of a parent element or container depending on the properties used. Care should be taken with regard to flex inheritance. You can easily sheild buttons or other elements by enclosing them in a non-flex element 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="row text-sm col-padding-md">
  <div class="col">
    <div class="nav-button-sm" id="navButtonExample1"></div>
  </div>
  <div class="col">
    <div class="nav-button-lg" id="navButtonExample2"></div>
  </div>
</div>

webui.ready( () => {

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

  ui("#navButtonExample1, #navButtonExample2").click( function() { 
    ui(this).toggleClass("active");
  });

});