Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

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
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>
   Link Button

Variations

Dropdown
Copy Pug
Copy HTML
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>
Button with Dropdown

Only icon
Copy Pug
Copy HTML
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>

On overlay
Copy Pug
Copy HTML
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>

Loading with icon
Copy Pug
Copy HTML
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>
<script>
  document.getElementById('button-loading-has-icon').addEventListener('click', toggleLoading);
</script>

<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><script>document.getElementById('button-loading-has-icon').addEventListener('click', toggleLoading);
</script>
Edit Selected

Loading only icon
Copy Pug
Copy HTML
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>
<script>
  document.getElementById('button-loading-only-icon').addEventListener('click', toggleLoading);
</script>

<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><script>document.getElementById('button-loading-only-icon').addEventListener('click', toggleLoading);
</script>

Loading without icon
Copy Pug
Copy HTML
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>
<script>
  document.getElementById('button-loading-without-icon').addEventListener('click', toggleLoading);
</script>

<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><script>document.getElementById('button-loading-without-icon').addEventListener('click', toggleLoading);
</script>
Edit Selected

Loading overlay
Copy Pug
Copy HTML
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>
<script>
  document.getElementById('button-loading-overlay').addEventListener('click', toggleLoading);
</script>

<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><script>document.getElementById('button-loading-overlay').addEventListener('click', toggleLoading);
</script>
Edit Selected

Disabled
Copy Pug
Copy HTML
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>

Size variations

Small
Copy Pug
Copy HTML
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>
Small Button

Large
Copy Pug
Copy HTML
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>
Large Button

Large extended
Copy Pug
Copy HTML
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>

Narrow
Copy Pug
Copy HTML
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>

Narrow with icon
Copy Pug
Copy HTML
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>

Fullwidth
Copy Pug
Copy HTML
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>
Full Width Button

Color variations

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

<div class="e-btn e-btn-primary">
  Pirmary action
</div>

<div class="e-btn e-btn-primary">Pirmary action</div>
Pirmary action

Secondary
Copy Pug
Copy HTML
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>
Secondary action

Borderless
Copy Pug
Copy HTML
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>
Borderless Button

Borderless
Copy Pug
Copy HTML
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>
Borderless Button

Link
Copy Pug
Copy HTML
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>
Link Button

Related components

Button groupButton radioPaginationHeaderDropdown

Button Guideline

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.
    • 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:

  • 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.
  • Blue - Secondary actions which are also available as a normal part of the workflow.
  • White - All other buttons.

Behaviour

Buttons have five possible functions:

  • 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.
  • 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.
  • 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.
  • Navigate to a different page
    • Navigation to a separate feature or fnuctionality set should just be a one-way trip.
  • 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. Therefpre 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 acurate. Say what the button does.
  • Never break a button over two lines.

If you need help, ask doc_Loc - that's what they are there for!