ng2-encrm-components/src/app/element-list/elements/buttons-preview/buttons-preview.component.html

angular 2 components

<div class="col-xs-12">
  <h1 id="buttons">Buttons</h1>
  <div>
    <div class="en-btn en-btn-primary">Primary</div>
    <div class="en-btn en-btn-secondary">Secondary</div>
    <div class="en-btn en-btn-success">Success</div>
    <div class="en-btn en-btn-info">Info</div>
    <div class="en-btn en-btn-warning">Warning</div>
    <div class="en-btn en-btn-danger"><i class="material-icons">delete</i>Danger</div>
    <div class="en-btn btn-link">Link</div>
    <a href="#buttons">link</a>
  </div>
  <br>
  <tabset>
    <tab heading="HTML">
            <pre><code highlight class="html">
&lt;div class=&quot;en-btn en-btn-primary&quot;&gt;Primary&lt;/div&gt;
&lt;div class=&quot;en-btn en-btn-secondary&quot;&gt;Secondary&lt;/div&gt;
&lt;div class=&quot;en-btn en-btn-success&quot;&gt;Success&lt;/div&gt;
&lt;div class=&quot;en-btn en-btn-info&quot;&gt;Info&lt;/div&gt;
&lt;div class=&quot;en-btn en-btn-warning&quot;&gt;Warning&lt;/div&gt;
&lt;div class=&quot;en-btn en-btn-danger&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;delete&lt;/i&gt;Danger&lt;/div&gt;
&lt;div class=&quot;en-btn btn-link&quot;&gt;Link&lt;/div&gt;
&lt;a href=&quot;#buttons&quot;&gt;link&lt;/a&gt;
        </code>
      </pre>
    </tab>
    <tab heading="TypeScript">
      <pre><code highlight class="typescript">none</code></pre>
    </tab>
  </tabset>

  <br>
  <div class="card bg-inverse p-a-2">
    <div class="en-btn en-btn-dark">przypisz</div>
    <div class="en-btn en-btn-dark disabled">przypisz</div>
  </div>
  <br>
  <tabset>
    <tab heading="HTML">
            <pre><code highlight class="html">
&lt;div class=&quot;card bg-inverse p-a-2&quot;&gt;
	&lt;div class=&quot;en-btn en-btn-dark&quot;&gt;przypisz&lt;/div&gt;
	&lt;div class=&quot;en-btn en-btn-dark disabled&quot;&gt;przypisz&lt;/div&gt;
&lt;/div&gt;
        </code>
      </pre>
    </tab>
    <tab heading="TypeScript">
      <pre><code highlight class="typescript">none</code></pre>
    </tab>
  </tabset>
  <br>
  <div class="card p-a-2">
    <div class="en-btn btn-primary btn-circ"><i class="material-icons">camera_alt</i></div>
    <div class="en-btn btn-primary btn-circ-lg"><i
      class="material-icons">keyboard_arrow_up</i>
    </div>
  </div>
  <br>
  <tabset>
    <tab heading="HTML">
            <pre><code highlight class="html">&lt;div class=&quot;en-btn btn-primary btn-circ&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;camera_alt&lt;/i&gt;&lt;/div&gt;
&lt;div class=&quot;en-btn btn-primary btn-circ-lg&quot;&gt;&lt;i
	class=&quot;material-icons&quot;&gt;keyboard_arrow_up&lt;/i&gt;
&lt;/div&gt;</code></pre>
    </tab>
    <tab heading="TypeScript">
      <pre><code highlight class="typescript">none</code></pre>
    </tab>
  </tabset>
  <br><br>
  <h3><code>ButtonSaveComponent</code></h3>
  <button-save [id]="'save-button'"
               textSuccess="Is done !"
               textError="Something bad"
  > SAVE </button-save>

</div>