UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

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.

Last update:
()
Message fix(content-blocks): outsource mixins and variables
Committer: rudywaltz
Version history

Default

Copy Jade
Copy HTML
Show code
Hide code
.e-btn 

<button class="e-btn">
  Button button
</button>
&nbsp;
<a href="#" class="e-btn">
  Link button
</a>


                                <button class="e-btn">Button button</button>&nbsp;<a href="#" class="e-btn">Link button</a>
 Link button

Variations

Dropdown
Copy Jade
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

Borderless
Copy Jade
Copy HTML
Show code
Hide code
.e-btn-borderless 

<div class="e-btn e-btn-borderless">
  Button without border
</div>


                                  <div class="e-btn e-btn-borderless">Button without border</div>
Button without border

Only icon
Copy Jade
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 Jade
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 Jade
Copy HTML
Show code
Hide code
.e-btn__loading 

<div id="button-loading-has-icon" class="e-btn">
  <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 id="button-loading-has-icon" class="e-btn">
                                    <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 Jade
Copy HTML
Show code
Hide code
.e-btn__loading 

<div id="button-loading-only-icon" class="e-btn e-btn-onlyicon">
  <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 id="button-loading-only-icon" class="e-btn e-btn-onlyicon">
                                    <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 Jade
Copy HTML
Show code
Hide code
.e-btn__loading 

<div id="button-loading-without-icon" class="e-btn">
  <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 id="button-loading-without-icon" class="e-btn">
                                    <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 Jade
Copy HTML
Show code
Hide code
.e-btn__loading 

<div id="button-loading-overlay" class="e-btn e-btn-primary e-btn-has_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 id="button-loading-overlay" class="e-btn e-btn-primary e-btn-has_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 Jade
Copy HTML
Show code
Hide code
.e-btn-disabled or :disabled 

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


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

Size variations

Small
Copy Jade
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 Jade
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 Jade
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 Jade
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 Jade
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="caret-right"></e-icon>
</div>


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

Fullwidth
Copy Jade
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

Link
Copy Jade
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

default
Copy Jade
Copy HTML
Show code
Hide code
.e-btn-default 

<button class="e-btn e-btn-default">
  Button
</button>


                                  <button class="e-btn e-btn-default">Button</button>

primary
Copy Jade
Copy HTML
Show code
Hide code
.e-btn-primary 

<button class="e-btn e-btn-primary">
  Button
</button>


                                  <button class="e-btn e-btn-primary">Button</button>

secondary
Copy Jade
Copy HTML
Show code
Hide code
.e-btn-secondary 

<button class="e-btn e-btn-secondary">
  Button
</button>


                                  <button class="e-btn e-btn-secondary">Button</button>

dark
Copy Jade
Copy HTML
Show code
Hide code
.e-btn-dark 

<button class="e-btn e-btn-dark">
  Button
</button>


                                  <button class="e-btn e-btn-dark">Button</button>

danger
Copy Jade
Copy HTML
Show code
Hide code
.e-btn-danger 

<button class="e-btn e-btn-danger">
  Button
</button>


                                  <button class="e-btn e-btn-danger">Button</button>

warning
Copy Jade
Copy HTML
Show code
Hide code
.e-btn-warning 

<button class="e-btn e-btn-warning">
  Button
</button>


                                  <button class="e-btn e-btn-warning">Button</button>

Related components

Button groupButton radioPaginationHeaderDropdown

Button Guideline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ratione voluptatem ullam praesentium enim, velit similique ducimus repellendus pariatur doloremque commodi nisi optio tenetur ea facilis et. Beatae, dolorum, sint.