Components

Buttons

Primary

Fullscreen
<button class="ecl-button ecl-button--primary" type="submit">Primary button</button>

Try it yourself on the playground

Playground

Secondary

Fullscreen
<button class="ecl-button ecl-button--secondary" type="button">Secondary button</button>

Try it yourself on the playground

Playground

Call to action with icon

Fullscreen
<button class="ecl-button ecl-button--call" type="submit"><span class="ecl-button__container"><span
      class="ecl-button__label" data-ecl-label="true">Call to action button</span><svg
      class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-button__icon ecl-button__icon--after" focusable="false"
      aria-hidden="true" data-ecl-icon="">
      <use xlink:href="/dist/media/icons.6770a2ae.svg#corner-arrow"></use>
    </svg></span></button>

Try it yourself on the playground

Playground

Text

Fullscreen
<button class="ecl-button ecl-button--ghost" type="button">Text button</button>

Try it yourself on the playground

Playground