causeway-standard-theme/causeway/docs/components/buttons.html

<div class="container page">
  <div class="content pane single-pane">
    <section>
      <a id="buttons"></a>
      <header class="content-header">
        <h1 class="title">
          Buttons
        </h1>
        <ul class="nav nav-pills">
          <li>
            <a href="/docs/components/buttons.html#buttons-standard">
              Standard Buttons
            </a>
          </li>
          <li>
            <a href="/docs/components/buttons.html#buttons-icon">
              Icon Buttons
            </a>
          </li>
          <li>
            <a href="/docs/components/buttons.html#buttons-standard-icons">
              Standard Buttons with Icons
            </a>
          </li>
          <li>
            <a href="/docs/components/buttons.html#buttons-text">
              Text Button
            </a>
          </li>
          <li>
            <a href="/docs/components/buttons.html#buttons-arrow">
              Arrow Button
            </a>
          </li>
          <li>
            <a href="/docs/components/buttons.html#buttons-multi-action">
              Multi-action Buttons
            </a>
          </li>
        </ul>
      </header>
    </section>

    <section>
      <a id="buttons-standard"></a>
      <header class="content-header">
        <h1 class="title">
          Standard Buttons
        </h1>
      </header>

      <p>
        Buttons comprise of a surround and 2 styles, toggled by an optional attribute. The attribute appears in the opening <code>&lt;button&gt;</code> tag.
      </p>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>
              Style
            </th>
            <th>
              Attribute
            </th>
            <th>
              Value
            </th>
            <th>
              Example
            </th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="4">
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>
              Standard
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
              <button type="button" class="btn btn-default">
                Button
              </button>
            </td>
          </tr>
          <tr>
            <td>
              Disabled
            </td>
            <td>
              disabled
            </td>
            <td>
              disabled
            </td>
            <td>
              <button type="button" class="btn btn-default" disabled="disabled">
                Button
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <pre>
        <code>
          &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;
            &lt;!-- Insert text here --&gt;
          &lt;/button&gt;
        </code>
      </pre>
    </section>

    <section>
      <a id="buttons-icon"></a>
      <header class="content-header">
        <h1 class="title">
          Icon Buttons
        </h1>
      </header>

      <p>
        Icon buttons comprise of a surround, an icon (see <a href="/docs/shells/content/icons.html#content-icons">Icons</a>) and 2 styles, toggled by an optional attribute. The attribute appears in the opening <code>&lt;button&gt;</code> tag.
      </p>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>
              Style
            </th>
            <th>
              Attribute
            </th>
            <th>
              Value
            </th>
            <th>
              Example
            </th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="4">
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>
              Standard
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
              <button type="button" class="btn btn-default btn-icon">
                <span class="fa fa-search"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td>
              Disabled
            </td>
            <td>
              disabled
            </td>
            <td>
              disabled
            </td>
            <td>
              <button type="button" class="btn btn-default btn-icon" disabled="disabled">
                <span class="fa fa-search"></span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <pre>
        <code>
          &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-icon&quot;&gt;
            &lt;!-- Insert icon here --&gt;
          &lt;/button&gt;
        </code>
      </pre>
    </section>

    <section>
      <a id="buttons-standard-icons"></a>
      <header class="content-header">
        <h1 class="title">
          Standard Buttons with Icons
        </h1>
      </header>

      <p>
        These buttons comprise of a surround, text, an icon (see <a href="/docs/shells/content/icons.html#content-icons">Icons</a>) and 2 styles, toggled by an optional attribute. The attribute appears in the opening <code>&lt;button&gt;</code> tag.
      </p>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>
              Style
            </th>
            <th>
              Attribute
            </th>
            <th>
              Value
            </th>
            <th>
              Example
            </th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="4">
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>
              Standard
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
              <button type="button" class="btn btn-default btn-with-icon">
                Search
                <span class="fa fa-search"></span>
              </button>
            </td>
          </tr>
          <tr>
            <td>
              Disabled
            </td>
            <td>
              disabled
            </td>
            <td>
              disabled
            </td>
            <td>
              <button type="button" class="btn btn-default btn-with-icon" disabled="disabled">
                Search
                <span class="fa fa-search"></span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <pre>
        <code>
          &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-with-icon&quot;&gt;
            &lt;!-- Insert text here --&gt;
            &lt;span class=&quot;fa fa-search&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
        </code>
      </pre>
    </section>

    <section>
      <a id="buttons-text"></a>
      <header class="content-header">
        <h1 class="title">
          Text Buttons
        </h1>
      </header>

      <p>
        Text buttons comprise of a surround and 2 styles, toggled by an optional attribute. The attribute appears in the opening <code>&lt;button&gt;</code> tag.
      </p>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>
              Style
            </th>
            <th>
              Attribute
            </th>
            <th>
              Value
            </th>
            <th>
              Example
            </th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="4">
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>
              Standard
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
              <button type="button" class="btn btn-text">
                Button
              </button>
            </td>
          </tr>
          <tr>
            <td>
              Disabled
            </td>
            <td>
              disabled
            </td>
            <td>
              disabled
            </td>
            <td>
              <button type="button" class="btn btn-text" disabled="disabled">
                Button
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <pre>
        <code>
          &lt;button type=&quot;button&quot; class=&quot;btn btn-text&quot;&gt;
            &lt;!-- Insert text here --&gt;
          &lt;/button&gt;
        </code>
      </pre>
    </section>

    <section>
      <a id="buttons-arrow"></a>
      <header class="content-header">
        <h1 class="title">
          Arrow Button
        </h1>
      </header>

      <p>
        Arrow buttons comprise of a surround and 2 styles, toggled by an optional attribute. The attribute appears in the opening <code>&lt;button&gt;</code> tag.
      </p>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>
              Style
            </th>
            <th>
              Attribute
            </th>
            <th>
              Value
            </th>
            <th>
              Example
            </th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="4">
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>
              Standard
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
              <button type="button" class="btn btn-arrow"></button>
            </td>
          </tr>
          <tr>
            <td>
              Disabled
            </td>
            <td>
              disabled
            </td>
            <td>
              disabled
            </td>
            <td>
              <button type="button" class="btn btn-arrow" disabled="disabled"></button>
            </td>
          </tr>
        </tbody>
      </table>

      <pre>
        <code>
          &lt;button type=&quot;button&quot; class=&quot;btn btn-arrow&quot; disabled=&quot;disabled&quot;&gt;&lt;/button&gt;
        </code>
      </pre>
    </section>

    <section>
      <a id="buttons-multi-action"></a>
      <header class="content-header">
        <h1 class="title">
          Multi-action Buttons
        </h1>
      </header>

      <p>
        Multi-action buttons comprise of a surround, a list of <a href="/docs/components/buttons.html#buttons-standard">standard buttons</a> and 2 styles, toggled by an optional attribute. The attribute appears in both the first and second opening <code>&lt;button&gt;</code> tags. The lack of whitespace between the closing of the first button tag and the entirity of the second button is necessary to maintain the integrity of the button across all supported browsers.
      </p>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>
              Style
            </th>
            <th>
              Attribute
            </th>
            <th>
              Value
            </th>
            <th>
              Example
            </th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="4">
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>
              Standard
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
              <div class="btn-group btn-dropdown">
                <button type="button" class="btn btn-default">
                  Button
                </button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-chevron-down"></span></button>
                <ul class="dropdown-menu" role="menu">
                  <li>
                    <button type="button" class="btn">
                      Button
                    </button>
                  </li>
                  <li>
                    <button type="button" class="btn">
                      Button
                    </button>
                  </li>
                  <li>
                    <button type="button" class="btn">
                      Button
                    </button>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              Disabled
            </td>
            <td>
              disabled
            </td>
            <td>
              disabled
            </td>
            <td>
              <div class="btn-group btn-dropdown">
                <button type="button" class="btn btn-default btn-default" disabled="disabled">
                  Button
                </button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled"><span class="fa fa-chevron-down"></span></button>
                <ul class="dropdown-menu" role="menu">
                  <li>
                    <button type="button" class="btn">
                      Button
                    </button>
                  </li>
                  <li>
                    <button type="button" class="btn">
                      Button
                    </button>
                  </li>
                  <li>
                    <button type="button" class="btn">
                      Button
                    </button>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <pre>
        <code>
          &lt;div class=&quot;btn-group btn-dropdown&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;
              &lt;!-- Insert text here --&gt;
            &lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-default dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;&lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;&lt;/button&gt;
            &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
              &lt;li&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;
                  &lt;!-- Insert text here --&gt;
                &lt;/button&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;
                  &lt;!-- Insert text here --&gt;
                &lt;/button&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        </code>
      </pre>

    </section>

    <section>
      <a id="buttons-multi-action"></a>
      <header class="content-header">
        <h1 class="title">
          Button Group
        </h1>
      </header>

      <p>
        Group a series of buttons together on a single line with the button group
      </p>

      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
      </div>
      <br/>
      <br/>

      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default" disabled="disabled">Right</button>
      </div>
      <br/>
      <br/>

      <pre>
        <code>
      &lt;!-- Button Group --&gt;
      &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Left&lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Middle&lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Right&lt;/button&gt;
      &lt;/div&gt;

      &lt;!-- Button group with a disabled button --&gt;
      &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Left&lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Middle&lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; disabled=&quot;disabled&quot;&gt;Right&lt;/button&gt;
      &lt;/div&gt;
        </code>
      </pre>

    </section>

  </div>
</div>