Buttons - Components

Primary

<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

Tertiary

Fullscreen

<button class="ecl-button ecl-button--tertiary" type="button">Tertiary button</button>

Try it yourself on the playground

Playground

Call to action

Fullscreen

<button class="ecl-button ecl-button--cta" type="submit">Call to action button</button>

Try it yourself on the playground

Playground

Ghost

Fullscreen

<button class="ecl-button ecl-button--ghost" type="button">Ghost button</button>

Try it yourself on the playground

Playground

Ghost inverted

Fullscreen

<button class="ecl-button ecl-button--ghost-inverted" type="button">Ghost inverted button</button>

Try it yourself on the playground

Playground

Button with icon only

Button label can be hidden by using button variant ecl-button--icon-only. The label has to be filled in any case, to provide context to screen readers.

Of course, this requires to have an icon defined, otherwise the display would be suboptimal.

Spacing of icon only button is adapted to make it square.

Fullscreen

<button class="ecl-button ecl-button--secondary ecl-button--icon-only" type="button"><span
    class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Secondary button</span><svg
      class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-button__icon" focusable="false" aria-hidden="true"
      data-ecl-icon>
      <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
    </svg></span></button>

Try it yourself on the playground

Playground