@coreui/ajax/Aurelia_Full_Esnext_Webpack/src/modules/components/buttons.html

Open Source Bootstrap Admin Template

<template>
  <div class="animated fadeIn">
    <div class="row">

      <div class="col-md-6">

        <div class="card">
          <div class="card-header">
            <strong>Options</strong>
          </div>
          <div class="card-block">
            <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
            <button type="button" class="btn btn-primary">Primary</button>

            <!-- Secondary, outline button -->
            <button type="button" class="btn btn-secondary">Secondary</button>

            <!-- Indicates a successful or positive action -->
            <button type="button" class="btn btn-success">Success</button>

            <!-- Indicates caution should be taken with this action -->
            <button type="button" class="btn btn-warning">Warning</button>

            <!-- Indicates a dangerous or potentially negative action -->
            <button type="button" class="btn btn-danger">Danger</button>

            <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
            <button type="button" class="btn btn-link">Link</button>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <strong>With Icons</strong>
          </div>
          <div class="card-block">
            <button type="button" class="btn btn-primary"><i class="fa fa-star"></i>&nbsp; Primary</button>
            <button type="button" class="btn btn-secondary"><i class="fa fa-lightbulb-o"></i>&nbsp; Secondary</button>
            <button type="button" class="btn btn-success"><i class="fa fa-magic"></i>&nbsp; Success</button>
            <button type="button" class="btn btn-warning"><i class="fa fa-map-marker"></i>&nbsp; Warning</button>
            <button type="button" class="btn btn-danger"><i class="fa fa-rss"></i>&nbsp; Danger</button>
            <button type="button" class="btn btn-link"><i class="fa fa-link"></i>&nbsp; Link</button>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <strong>Size Large</strong>
            <small>Add this class
              <code>.btn-lg</code>
            </small>
          </div>
          <div class="card-block">
            <button type="button" class="btn btn-primary btn-lg">Primary</button>
            <button type="button" class="btn btn-secondary btn-lg">Secondary</button>
            <button type="button" class="btn btn-success btn-lg">Success</button>
            <button type="button" class="btn btn-info btn-lg">Info</button>
            <button type="button" class="btn btn-warning btn-lg">Warning</button>
            <button type="button" class="btn btn-danger btn-lg">Danger</button>
            <button type="button" class="btn btn-link btn-lg">Link</button>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <strong>Size Small</strong>
            <small>Add this class
              <code>.btn-sm</code>
            </small>
          </div>
          <div class="card-block">
            <button type="button" class="btn btn-primary btn-sm">Primary</button>
            <button type="button" class="btn btn-secondary btn-sm">Secondary</button>
            <button type="button" class="btn btn-success btn-sm">Success</button>
            <button type="button" class="btn btn-info btn-sm">Info</button>
            <button type="button" class="btn btn-warning btn-sm">Warning</button>
            <button type="button" class="btn btn-danger btn-sm">Danger</button>
            <button type="button" class="btn btn-link btn-sm">Link</button>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <strong>Disabled state</strong>
            <small>Add this
              <code>disabled="disabled"</code>
            </small>
          </div>
          <div class="card-block">
            <button type="button" class="btn btn-primary" disabled="disabled">Primary</button>
            <button type="button" class="btn btn-secondary" disabled="disabled">Secondary</button>
            <button type="button" class="btn btn-success" disabled="disabled">Success</button>
            <button type="button" class="btn btn-info" disabled="disabled">Info</button>
            <button type="button" class="btn btn-warning" disabled="disabled">Warning</button>
            <button type="button" class="btn btn-danger" disabled="disabled">Danger</button>
            <button type="button" class="btn btn-link" disabled="disabled">Link</button>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <strong>Active state</strong>
            <small>Add this class
              <code>.active</code>
            </small>
          </div>
          <div class="card-block">
            <button type="button" class="btn btn-primary active">Primary</button>
            <button type="button" class="btn btn-secondary active">Secondary</button>
            <button type="button" class="btn btn-success active">Success</button>
            <button type="button" class="btn btn-info active">Info</button>
            <button type="button" class="btn btn-warning active">Warning</button>
            <button type="button" class="btn btn-danger active">Danger</button>
            <button type="button" class="btn btn-link active">Link</button>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <strong>Block Level Buttons</strong>
            <small>Add this class
              <code>.btn-block</code>
            </small>
          </div>
          <div class="card-block">
            <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
            <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
            <button type="button" class="btn btn-success btn-lg btn-block">Block level button</button>
            <button type="button" class="btn btn-info btn-lg btn-block">Block level button</button>
            <button type="button" class="btn btn-warning btn-lg btn-block">Block level button</button>
            <button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>
            <button type="button" class="btn btn-link btn-lg btn-block">Block level button</button>
          </div>
        </div>

      </div>
      <!--/col-->

      <div class="col-md-6">

        <div class="card">
          <div class="card-header">
            <strong>Options</strong>
          </div>
          <div class="card-block">
            <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
            <button type="button" class="btn btn-outline-primary">Primary</button>

            <!-- Secondary, outline button -->
            <button type="button" class="btn btn-outline-secondary">Secondary</button>

            <!-- Indicates a successful or positive action -->
            <button type="button" class="btn btn-outline-success">Success</button>

            <!-- Indicates caution should be taken with this action -->
            <button type="button" class="btn btn-outline-warning">Warning</button>

            <!-- Indicates a dangerous or potentially negative action -->
            <button type="button" class="btn btn-outline-danger">Danger</button>

          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <strong>With Icons</strong>
          </div>
          <div class="card-block">
            <button type="button" class="btn btn-outline-primary"><i class="fa fa-star"></i>&nbsp; Primary</button>
            <button type="button" class="btn btn-outline-secondary"><i class="fa fa-lightbulb-o"></i>&nbsp; Secondary
            </button>
            <button type="button" class="btn btn-outline-success"><i class="fa fa-magic"></i>&nbsp; Success</button>
            <button type="button" class="btn btn-outline-warning"><i class="fa fa-map-marker"></i>&nbsp; Warning
            </button>
            <button type="button" class="btn btn-outline-danger"><i class="fa fa-rss"></i>&nbsp; Danger</button>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <strong>Size Large</strong>
            <small>Add this class
              <code>.btn-lg</code>
            </small>
          </div>
          <div class="card-block">
            <button type="button" class="btn btn-outline-primary btn-lg">Primary</button>
            <button type="button" class="btn btn-outline-secondary btn-lg">Secondary</button>
            <button type="button" class="btn btn-outline-success btn-lg">Success</button>
            <button type="button" class="btn btn-outline-info btn-lg">Info</button>
            <button type="button" class="btn btn-outline-warning btn-lg">Warning</button>
            <button type="button" class="btn btn-outline-danger btn-lg">Danger</button>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <strong>Size Small</strong>
            <small>Add this class
              <code>.btn-sm</code>
            </small>
          </div>
          <div class="card-block">
            <button type="button" class="btn btn-outline-primary btn-sm">Primary</button>
            <button type="button" class="btn btn-outline-secondary btn-sm">Secondary</button>
            <button type="button" class="btn btn-outline-success btn-sm">Success</button>
            <button type="button" class="btn btn-outline-info btn-sm">Info</button>
            <button type="button" class="btn btn-outline-warning btn-sm">Warning</button>
            <button type="button" class="btn btn-outline-danger btn-sm">Danger</button>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <strong>Disabled state</strong>
            <small>Add this
              <code>disabled="disabled"</code>
            </small>
          </div>
          <div class="card-block">
            <button type="button" class="btn btn-outline-primary" disabled="disabled">Primary</button>
            <button type="button" class="btn btn-outline-secondary" disabled="disabled">Secondary</button>
            <button type="button" class="btn btn-success" disabled="disabled">Success</button>
            <button type="button" class="btn btn-outline-info" disabled="disabled">Info</button>
            <button type="button" class="btn btn-outline-warning" disabled="disabled">Warning</button>
            <button type="button" class="btn btn-outline-danger" disabled="disabled">Danger</button>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <strong>Active state</strong>
            <small>Add this class
              <code>.active</code>
            </small>
          </div>
          <div class="card-block">
            <button type="button" class="btn btn-outline-primary active">Primary</button>
            <button type="button" class="btn btn-outline-secondary active">Secondary</button>
            <button type="button" class="btn btn-outline-success active">Success</button>
            <button type="button" class="btn btn-outline-info active">Info</button>
            <button type="button" class="btn btn-outline-warning active">Warning</button>
            <button type="button" class="btn btn-outline-danger active">Danger</button>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <strong>Block Level Buttons</strong>
            <small>Add this class
              <code>.btn-block</code>
            </small>
          </div>
          <div class="card-block">
            <button type="button" class="btn btn-outline-secondary btn-lg btn-block">Block level button</button>
            <button type="button" class="btn btn-outline-primary btn-lg btn-block">Block level button</button>
            <button type="button" class="btn btn-outline-success btn-lg btn-block">Block level button</button>
            <button type="button" class="btn btn-outline-info btn-lg btn-block">Block level button</button>
            <button type="button" class="btn btn-outline-warning btn-lg btn-block">Block level button</button>
            <button type="button" class="btn btn-outline-danger btn-lg btn-block">Block level button</button>
          </div>
        </div>

      </div>
      <!--/col-->
    </div>
    <!--/row-->
  </div>

</template>