Components

Buttons

Primary

Fullscreen
<button type="submit" class="ecl-button ecl-button--primary"><span class="ecl-button__container"><span
      class="ecl-button__label" data-ecl-label="true">Primary button</span></span></button>

Try it yourself on the playground

Playground

Secondary

Fullscreen
<button type="submit" class="ecl-button ecl-button--secondary"><span class="ecl-button__container"><span
      class="ecl-button__label" data-ecl-label="true">Secondary button</span></span></button>

Try it yourself on the playground

Playground

Call to action with icon

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

Try it yourself on the playground

Playground

Text

Fullscreen
<button type="submit" class="ecl-button ecl-button--ghost"><span class="ecl-button__container"><span
      class="ecl-button__label" data-ecl-label="true">Text button</span></span></button>

Try it yourself on the playground

Playground

Search

Fullscreen
<button type="submit" class="ecl-button ecl-button--search"><span class="ecl-button__container"><span
      class="ecl-button__label" data-ecl-label="true">Search button</span></span></button>

Try it yourself on the playground

Playground