Button #permalink

Default styling

Div button

div button

Preview Edit Copy Delete jkdjwkqjdkqjw kejqkw jekj

Link button File input

.e-btn-default

colored default

Div button e-btn-default

div button e-btn-default

Preview Edit Copy Delete jkdjwkqjdkqjw kejqkw jekj

Link button e-btn-default File input

.e-btn-primary

primary

Div button e-btn-primary

div button e-btn-primary

Preview Edit Copy Delete jkdjwkqjdkqjw kejqkw jekj

Link button e-btn-primary File input

.e-btn-secondary

secondary

Div button e-btn-secondary

div button e-btn-secondary

Preview Edit Copy Delete jkdjwkqjdkqjw kejqkw jekj

Link button e-btn-secondary File input

.e-btn-info

info

Div button e-btn-info

div button e-btn-info

Preview Edit Copy Delete jkdjwkqjdkqjw kejqkw jekj

Link button e-btn-info File input

.e-btn-dark

dark

Div button e-btn-dark

div button e-btn-dark

Preview Edit Copy Delete jkdjwkqjdkqjw kejqkw jekj

Link button e-btn-dark File input

.e-btn-danger

danger

Div button e-btn-danger

div button e-btn-danger

Preview Edit Copy Delete jkdjwkqjdkqjw kejqkw jekj

Link button e-btn-danger File input

.e-btn-warning

warning

Div button e-btn-warning

div button e-btn-warning

Preview Edit Copy Delete jkdjwkqjdkqjw kejqkw jekj

Link button e-btn-warning File input

.e-btn-alert

alert

Div button e-btn-alert

div button e-btn-alert

Preview Edit Copy Delete jkdjwkqjdkqjw kejqkw jekj

Link button e-btn-alert File input

<div class="e-row">
  <div class="e-col-12">

    <div class="e-btn ">Div button </div>

    <div class="e-btn ">
      <svg class="e-icon e-icon-white e-icon-user" ><use xlink:href="#user" ></use></svg> div button 
    </div>

    <div class="e-btn ">
      <span class="e-btn__separator">
        <svg class="e-icon e-icon-white e-icon-user" ><use xlink:href="#user" ></use></svg>
      </span>
      div button 
    </div>

    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown ">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#">
          <svg class="e-icon e-icon-table" ><use xlink:href="#pencil" ></use></svg> Preview
        </a>
        <a class="e-dropdown__item" href="#">
          <svg class="e-icon e-icon-table" ><use xlink:href="#eye" ></use></svg> Edit
        </a>
        <a class="e-dropdown__item" href="#">
          <svg class="e-icon e-icon-table" ><use xlink:href="#pencil" ></use></svg> Copy
        </a>
        <a class="e-dropdown__item" href="#">
          <svg class="e-icon e-icon-table" ><use xlink:href="#eye" ></use></svg> Delete jkdjwkqjdkqjw kejqkw jekj
        </a>
      </div>
    </e-dropdown>

    <a href="#" class="e-btn ">Link button </a>

    <button class="e-btn ">Button button </button>

    <input class="e-btn " type="submit" value="Submit button " />

    <span class="e-btn e-btn-fileinput ">
      <svg class="e-icon e-icon-white e-icon-folder-open">
        <use xlink:href="#folder-open"></use>
      </svg> File input<input type="file" name="name" id="id-fileinput"/>
    </span>

  </div>
</div>

Fileupload #permalink

Default styling

File input

.e-btn-dark

dark

File input

<span class="e-btn e-btn-fileinput ">
  <svg class="e-icon e-icon-white e-icon-folder-open">
    <use xlink:href="#folder-open"></use>
  </svg> File input<input type="file" name="name" id="id-fileinput"/>
</span>

Buttongroup #permalink

<div class="e-buttongroup">
  <button class="e-btn" type="reset">Default</button>
  <button class="e-btn e-btn-secondary" type="submit">Secondary</button>
  <button class="e-btn e-btn-primary" type="submit">Primary</button>
</div>