Buttons

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Simple Example

Used to style buttons, input or a elements

HTML

<a class="btn btn-secondary" href="void(0)" role="button">Caption</a>

Logi XML

<Label Class="btn btn-secondary" Caption="Caption">
   <Action Javascript="void(0);" Type="Javascript" />
</Label>

Simple

Button Options

Secondary Primary Success Info Warning Light Danger Link

<Label Caption="Primary" Class="btn btn-primary" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Secondary" Class="btn btn-secondary" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Success" Class="btn btn-success" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Info" Class="btn btn-info" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Warning" Class="btn btn-warning" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Light" Class="btn btn-light" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Danger" Class="btn btn-danger" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Link" Class="btn btn-link" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Primary Secondary Success Info Warning Light Danger

<Label Caption="Primary" Class="btn btn-outline-primary" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Secondary" Class="btn btn-outline-secondary" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Success" Class="btn btn-outline-success" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Info" Class="btn btn-outline-info" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Warning" Class="btn btn-outline-warning" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Light" Class="btn btn-outline-light" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Danger" Class="btn btn-outline-danger" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>

Sizes

Large Secondary Small Extra Small

<Label Caption="Large" Class="btn btn-secondary btn-lg" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Secondary" Class="btn btn-secondary" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Small" Class="btn btn-secondary btn-sm" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>
<Label Caption="Extra Small" Class="btn btn-secondary btn-xs" HtmlTag="A">
  <EventHandler DhtmlEvent="href">
    <Action Javascript="void(0);" Type="Javascript" />
  </EventHandler>
</Label>

Button Block

Block level button

<Label Caption="Block level button" Class="btn btn-primary btn-block btn-lg" />

Active State

Secondary Primary Success Info Warning Light Danger

<Label Caption="Secondary" Class="btn btn-secondary btn-lg active" />
<Label Caption="Primary" Class="btn btn-primary btn-lg active" />
<Label Caption="Success" Class="btn btn-success btn-lg active" />
<Label Caption="Info" Class="btn btn-info btn-lg active" />
<Label Caption="Warning" Class="btn btn-warning btn-lg active" />
<Label Caption="Danger" Class="btn btn-danger btn-lg active" />

Disabled State

Secondary Primary Success Info Warning Light Danger

<Label Caption="Secondary" Class="btn btn-secondary btn-lg disabled" />
<Label Caption="Secondary" Class="btn btn-secondary btn-lg disabled" />
<Label Caption="Primary" Class="btn btn-primary btn-lg disabled" />
<Label Caption="Success" Class="btn btn-success btn-lg disabled" />
<Label Caption="Info" Class="btn btn-info btn-lg disabled" />
<Label Caption="Warning" Class="btn btn-warning btn-lg disabled" />
<Label Caption="Danger" Class="btn btn-danger btn-lg disabled" />

With Icons

Button with Icon

Search Arrows Star More Info Uh Oh Danger

<Division Class="btn btn-secondary" ID="btnIconSecondary">
  <Label Class="fa fa-search" HtmlTag="I" ID="icon" />
  <Spaces />
  <Label Caption="Search" />
  <Action Javascript="void(0);" Type="Javascript" />
</Division>
<Division Class="btn btn-primary" ID="btnIconPrimary">
  <Label Class="fa fa-arrows-alt" HtmlTag="I" ID="icon" />
  <Spaces />
  <Label Caption="Arrows" />
  <Action Javascript="void(0);" Type="Javascript" />
</Division>
<Division Class="btn btn-success" ID="btnIconSuccess">
  <Label Class="fa fa-star" HtmlTag="I" ID="icon" />
  <Spaces />
  <Label Caption="Star" />
  <Action Javascript="void(0);" Type="Javascript" />
</Division><Division Class="btn btn-info" ID="btnIconInfo">
  <Label Class="fa fa-info" HtmlTag="I" ID="icon" />
  <Spaces />
  <Label Caption="More Info" />
  <Action Javascript="void(0);" Type="Javascript" />
</Division>
<Division Class="btn btn-warning" ID="btnIconWarning">
  <Label Class="fa fa-exclamation" HtmlTag="I" ID="icon" />
  <Spaces />
  <Label Caption="Uh Oh" />
  <Action Javascript="void(0);" Type="Javascript" />
</Division>
<Division Class="btn btn-danger" ID="btnIconDanger">
  <Label Class="fa fa-exclamation-triangle" HtmlTag="I" ID="icon" />
  <Spaces />
  <Label Caption="Danger" />
  <Action Javascript="void(0);" Type="Javascript" />
</Division>

Button groups

Standard button groups

Use btn-{xs,sm,lg} for sizing of the button group.

Left Middle Right

Simple Dark Blue Military Muted Blue Flyte-Orange Light Housby

<Division Class="btn-group">
  <Label Caption="Left" Class="btn btn-secondary btn-lg" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
  <Label Caption="Middle" Class="btn btn-secondary btn-lg" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
  <Label Caption="Right" Class="btn btn-secondary btn-lg" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
</Division>
<Division Class="btn-group" HtmlDiv="True">
  <Label Caption="Simple" Class="btn btn-secondary" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
  <Label Caption="Dark Blue" Class="btn btn-primary" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
  <Label Caption="Military" Class="btn btn-success" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
  <Label Caption="Muted Blue" Class="btn btn-info" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
  <Label Caption="Flyte-Orange" Class="btn btn-warning" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
  <Label Caption="Light" Class="btn btn-light" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
  <Label Caption="Housby" Class="btn btn-danger" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
</Division>

Vertical button group

Left Middle Right

<Division Class="btn-group-vertical">
  <Label Caption="Left" Class="btn btn-secondary" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
  <Label Caption="Middle" Class="btn btn-secondary" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
  <Label Caption="Right" Class="btn btn-secondary" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
</Division>

Justified button groups

Left Middle Right

<Division Class="btn-group btn-group-justified" HtmlDiv="True">
  <Label Caption="Left" Class="btn btn-secondary" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
  <Label Caption="Middle" Class="btn btn-secondary" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
  <Label Caption="Right" Class="btn btn-secondary" HtmlTag="a">
    <EventHandler DhtmlEvent="href">
      <Action Javascript="void(0);" Type="Javascript" />
    </EventHandler>
  </Label>
</Division>

Button Dropdowns

Single button dropdowns

<Division Class="btn-group dropdown" HtmlDiv="True">
  <Division Class="btn btn-secondary dropdown-toggle" ID="btnDropdown">
    <Label Caption="Action" />
  </Division>
  <Division Class="dropdown-menu" HtmlDiv="True">
    <Label Caption="Action" Class="dropdown-item" HtmlTag="a">
      <EventHandler DhtmlEvent="href">
        <Action Javascript="void(0);" Type="Javascript" />
      </EventHandler>
    </Label>
    <Label Caption="Something else here" Class="dropdown-item" HtmlTag="a">
      <EventHandler DhtmlEvent="href">
        <Action Javascript="void(0);" Type="Javascript" />
      </EventHandler>
    </Label>
    <Division Class="dropdown-divider" HtmlDiv="True" />
    <Label Caption="Separated link" Class="dropdown-item" HtmlTag="a">
      <EventHandler DhtmlEvent="href">
        <Action Javascript="void(0);" Type="Javascript" />
      </EventHandler>
    </Label>
  </Division>
</Division>

/*START INCLUDE SCRIPT ELEMENT...*/
$('.dropdown-toggle:not([attr=\'data-toggle\'])').attr('data-toggle', 'dropdown');
/*...END INCLUDE SCRIPT*/

Split button dropdowns

Action

<Division Class="btn-group" HtmlDiv="True">
  <Label Caption="Action" Class="btn btn-secondary" />
  <Division Class="btn btn-secondary dropdown-toggle" ID="btnShowDDL" />
  <Division Class="dropdown-menu" HtmlDiv="True">
    <Label Caption="Action" Class="dropdown-item" HtmlTag="a">
      <EventHandler DhtmlEvent="href">
        <Action Javascript="void(0);" Type="Javascript" />
      </EventHandler>
    </Label>
    <Label Caption="Something else here" Class="dropdown-item" HtmlTag="a">
      <EventHandler DhtmlEvent="href">
        <Action Javascript="void(0);" Type="Javascript" />
      </EventHandler>
    </Label>
    <Division Class="dropdown-divider" HtmlDiv="True" />
    <Label Caption="Separated link" Class="dropdown-item" HtmlTag="a">
      <EventHandler DhtmlEvent="href">
        <Action Javascript="void(0);" Type="Javascript" />
      </EventHandler>
    </Label>
  </Division>
</Division>

/*START INCLUDE SCRIPT ELEMENT...*/
$('.dropdown-toggle:not([attr=\'data-toggle\'])').attr('data-toggle', 'dropdown');
/*...END INCLUDE SCRIPT*/