Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Button

A Button should be used if you want the user to be able to perform an action, for example: opening or closing dialogs, creating, editing or deleting an item, starting or stopping a process. You can use Buttons in a variety of formats and colors depending on the priority and type of the action.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn

<button class="e-btn">
  Button Button
</button>
&nbsp;
<input class="e-btn" type="submit" value="Submit">
&nbsp;
<input class="e-btn" type="button" value="Button">
&nbsp;
<a class="e-btn" href="#">
  Link Button
</a>
<button class="e-btn">
  Button Button
</button>
&nbsp;
<input class="e-btn" type="submit" value="Submit">
&nbsp;
<input class="e-btn" type="button" value="Button">
&nbsp;
<a class="e-btn" href="#">
  Link Button
</a>
JavaScript
Copy JavaScript
   Link Button

Variations

Dropdown
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-dropdown

<div class="e-btn e-btn-dropdown">
  Button with Dropdown
</div>
<div class="e-btn e-btn-dropdown">
  Button with Dropdown
</div>
JavaScript
Copy JavaScript
Button with Dropdown

Only icon
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-onlyicon

<div class="e-btn e-btn-onlyicon">
  <e-icon icon="cog"></e-icon>
</div>
<div class="e-btn e-btn-onlyicon">
  <e-icon icon="cog"></e-icon>
</div>
JavaScript
Copy JavaScript

On overlay
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-on_overlay

<div class="e-btn e-btn-on_overlay e-btn-onlyicon">
  <e-icon icon="cog"></e-icon>
</div>
<div class="e-btn e-btn-on_overlay e-btn-onlyicon">
  <e-icon icon="cog"></e-icon>
</div>
JavaScript
Copy JavaScript

Loading with icon
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn__loading

<div class="e-btn" id="button-loading-has-icon">
  <div class="e-btn__loading">
    <e-spinner data-size="small"></e-spinner>
    <e-icon icon="cog"></e-icon>
  </div>
  Edit Selected
</div>
<div class="e-btn" id="button-loading-has-icon">
  <div class="e-btn__loading">
    <e-spinner data-size="small"></e-spinner>
    <e-icon icon="cog"></e-icon>
  </div>
  Edit Selected
</div>
JavaScript
Copy JavaScript
document.getElementById('button-loading-has-icon').addEventListener('click', toggleLoading);
Edit Selected

Loading only icon
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn__loading

<div class="e-btn e-btn-onlyicon" id="button-loading-only-icon">
  <div class="e-btn__loading">
    <e-spinner data-size="small"></e-spinner>
    <e-icon icon="cog"></e-icon>
  </div>
</div>
<div class="e-btn e-btn-onlyicon" id="button-loading-only-icon">
  <div class="e-btn__loading">
    <e-spinner data-size="small"></e-spinner>
    <e-icon icon="cog"></e-icon>
  </div>
</div>
JavaScript
Copy JavaScript
document.getElementById('button-loading-only-icon').addEventListener('click', toggleLoading);

Loading without icon
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn__loading

<div class="e-btn" id="button-loading-without-icon">
  <div class="e-btn__loading">
    <e-spinner data-size="small"></e-spinner>
  </div>
  Edit Selected
</div>
<div class="e-btn" id="button-loading-without-icon">
  <div class="e-btn__loading">
    <e-spinner data-size="small"></e-spinner>
  </div>
  Edit Selected
</div>
JavaScript
Copy JavaScript
document.getElementById('button-loading-without-icon').addEventListener('click', toggleLoading);
Edit Selected

Loading overlay
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn__loading

<div class="e-btn e-btn-primary e-btn-has_overlay" id="button-loading-overlay">
  <div class="e-btn__loading">
    <e-spinner data-size="small"></e-spinner>
  </div>
  Edit Selected
</div>
<div class="e-btn e-btn-primary e-btn-has_overlay" id="button-loading-overlay">
  <div class="e-btn__loading">
    <e-spinner data-size="small"></e-spinner>
  </div>
  Edit Selected
</div>
JavaScript
Copy JavaScript
document.getElementById('button-loading-overlay').addEventListener('click', toggleLoading);
Edit Selected

Disabled
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-disabled or :disabled

<button class="e-btn" disabled>
  Disabled Button
</button>
<button class="e-btn" disabled>
  Disabled Button
</button>
JavaScript
Copy JavaScript

Size variations

Small
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-small

<div class="e-btn e-btn-small">
  Small Button
</div>
<div class="e-btn e-btn-small">
  Small Button
</div>
JavaScript
Copy JavaScript
Small Button

Large
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-large

<div class="e-btn e-btn-large">
  Large Button
</div>
<div class="e-btn e-btn-large">
  Large Button
</div>
JavaScript
Copy JavaScript
Large Button

Large extended
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-large.e-btn-extended

<button class="e-btn e-btn-large e-btn-extended">
  Extended Button
  <small>
    Second Row
  </small>
</button>
<button class="e-btn e-btn-large e-btn-extended">
  Extended Button
  <small>
    Second Row
  </small>
</button>
JavaScript
Copy JavaScript

Narrow
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-narrow

<button class="e-btn e-btn-narrow">
  Extended Button
</button>
<button class="e-btn e-btn-narrow">
  Extended Button
</button>
JavaScript
Copy JavaScript

Narrow with icon
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e.btn-onlyicon.e-btn-narrow

<div class="e-btn e-btn-onlyicon e-btn-narrow">
  <e-icon icon="e-caret-right"></e-icon>
</div>
<div class="e-btn e-btn-onlyicon e-btn-narrow">
  <e-icon icon="e-caret-right"></e-icon>
</div>
JavaScript
Copy JavaScript

Fullwidth
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-fullwidth

<div class="e-btn e-btn-fullwidth">
  Full Width Button
</div>
<div class="e-btn e-btn-fullwidth">
  Full Width Button
</div>
JavaScript
Copy JavaScript
Full Width Button

Color variations

Primary
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-primary

<div class="e-btn e-btn-primary">
  Primary action
</div>
<div class="e-btn e-btn-primary">
  Primary action
</div>
JavaScript
Copy JavaScript
Primary action

Secondary
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-secondary

<div class="e-btn e-btn-secondary">
  Secondary action
</div>
<div class="e-btn e-btn-secondary">
  Secondary action
</div>
JavaScript
Copy JavaScript
Secondary action

Borderless
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-borderless

<div class="e-btn e-btn-borderless">
  Borderless Button
</div>
<div class="e-btn e-btn-borderless">
  Borderless Button
</div>
JavaScript
Copy JavaScript
Borderless Button

Borderless
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-borderless

<div class="e-btn e-btn-borderless_white">
  Borderless Button
</div>
<div class="e-btn e-btn-borderless_white">
  Borderless Button
</div>
JavaScript
Copy JavaScript
Borderless Button

Link
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-btn-link

<div class="e-btn e-btn-link">
  Link Button
</div>
<div class="e-btn e-btn-link">
  Link Button
</div>
JavaScript
Copy JavaScript
Link Button

Related components

Button GroupTogglePaginationHeadingDropdown

Button

Structure

Buttons should only ever be located in the upper right or lower right of the screen.

  • Upper right, outside the frame: for navigation, or to initiate actions that relate to the family of items involved, e.g. create a new item.
  • Upper right, inside the frame: to initiate actions that relate to the selected item.
  • Lower right, inside the frame: to finish actions that relate to the selected item, such as Save, Launch, etc.
  • Make the size of the button flexible and place it so that a longer text will not make it look ugly.
  • Always assume that a translation make be up to twice as long as the English!

Design

Buttons come in three colours:

  1. Green: the primary action. Each page should ideally have one green button, which is the action that we expect and want the user to perform next in the workflow. Primary actions can be upper or lower right. In some cases there may be more than one, if the workflow has two equally valid paths at this point.
  2. Blue: secondary actions which are also available as a normal part of the workflow.
  3. White: all other buttons.

Behaviour

Buttons have five possible functions:

  1. Initiate a workflow
    • This starts a process that must be completed. It can be small, such as creating a new field, or large, such as creating a new program.
    • Ideally, nothing should be created or saved in the DB until this process have been completed - the initiation by itself should not save anything.
  2. Finish a workflow
    • This saves the changes and updates/creates the item in question.
    • Ideally, this should also close the dialog or page and return to the list overview page, or wherever the user was when they opened the workflow.
  3. Open a new sub-page or dialog
    • While working with an item, some buttons will open drill-down pages for more detailed analysis.
    • Sub-pages should always have a clear "Back" button to return to the main page.
    • Dialogs just need a "Close" button.
  4. Navigate to a different page
    • Navigation to a separate feature or functionality set should just be a one-way trip.
  5. Perform an action
    • Some actions are also one-off, such as "Refresh".

When a button is unavailable, it should be shown as such, but should always have a tooltip explaining why. There is nothing so frustrating as not knowing why the software won't help you. Except perhaps not seeing a button today that you know was there yesterday. Therefore always show it, but be faithful to the status of the button.

Examples of such tooltips:

  • "There are no changes to be saved."
  • "You do not have permission to perform this action."
  • "Your previews are all up to date."

Content

Buttons are governed by the following text rules:

  • All Words Capitalised. Always.
  • Less is more. If you need more than 3 words on a button, rethink the whole functionality.
  • Use the right word type:
    • For objects use nouns, e.g. "Detailed View".
    • For actions use imperative verbs, e.g. "Refresh", "Save".
  • Be accurate. Say what the button does.
  • Never break a button over two lines.

If you need help, ask doc_Loc — they'll gladly help you out!