Button

<ef-button>Button</ef-button>
<ef-button cta>Button</ef-button>
<ef-button disabled>Disabled</ef-button>
<ef-button toggles active>Toggle</ef-button>
<ef-button icon="tick">Button</ef-button>
<ef-button icon="tick" textpos="before">Button</ef-button>
<ef-button icon="tick"></ef-button>
<ef-button icon="tick" transparent></ef-button>

Use ef-button for actions in forms, dialogs, etc. with support for different states and styles.

Basic usage

ef-button can be used similarly to button. Styling and sizing are managed by the theme but can be customized using CSS.

<ef-button>Default</ef-button>
<ef-button class="large">Large</ef-button>

.large {
  height: 60px;
  min-width: 140px;
  font-size: 140%;
}

.large {
  height: 33px;
  min-width: 100px;
  font-size: 140%;
}

<ef-button>Default</ef-button>
<ef-button class="large">Large</ef-button>

Change styles and types

ef-button provides various styles to use for different scenarios, for example, call-to-action, disabled, toggles. To use a style, add its attribute to the ef-button.

<ef-button>Button</ef-button>
<ef-button disabled>Button</ef-button>
<ef-button cta>OK</ef-button>
<ef-button cta disabled>OK</ef-button>
<ef-button toggles>Toggle button</ef-button>

<ef-button>Button</ef-button>
<ef-button disabled>Button</ef-button>
<ef-button cta>OK</ef-button>
<ef-button cta disabled>OK</ef-button>
<ef-button toggles>Toggle button</ef-button>

Inline icon

To show an icon inside ef-button, use the icon attribute. Supported icons depend on the theme and can be seen on the icons page. Text can be configured to display before or after the icon using the textpos attribute.

<ef-button icon="tick"></ef-button>
<ef-button icon="tick">Button</ef-button>
<ef-button icon="tick" textpos="before">Button</ef-button>

<ef-button icon="tick"></ef-button>
<ef-button icon="tick">Button</ef-button>
<ef-button icon="tick" textpos="before">Button</ef-button>

More contents in button

If the button width needs to be fixed, and content requires more than one line, set height: auto; to ensure content displays correctly inside the button.

<ef-button icon="tick" class="lines">Fixed width 180px and more contents in button</ef-button>

.lines {
  height: auto;
  width: 180px;
}

.lines {
  height: auto;
  width: 180px;
}

<ef-button icon="tick" class="lines">Fixed width 180px and more contents in button</ef-button>

Switching icon on mouse over

ef-button can display an icon for mouse hover by using hover-icon attribute.

<ef-button icon="tick" hover-icon="cross"></ef-button>
<ef-button icon="cross" hover-icon="tick"></ef-button>

<ef-button icon="tick" hover-icon="cross"></ef-button>
<ef-button icon="cross" hover-icon="tick"></ef-button>

Handling click events on desktop and mobile

ef-button provides events that work on both desktop and mobile. Use tap to ensure that the event will work on different platforms.

<div class="container">
  <ef-button id="button">Tap / Click Me</ef-button>
  <span id="text"></span>
</div>

var btn = document.getElementById('button');
btn.addEventListener('tap', function() {
  document.getElementById('text').textContent = 'Got event tap!';
});

.container {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

#text {
  padding-left: 10px;
}

<ef-button id="button">Click Me</ef-button>

var btn = document.getElementById('button');
btn.addEventListener('tap', function () {
  document.getElementById('text').textContent = 'Clicked!';
});