Skip to content

Buttons

We use button as main element for click function. Use a disabled attribute disabled="disabled" when a button can't be clicked.

Basic buttons

Primary button

1
<button type="button" class="btn btn-primary">Confirm selection</button>

Disabled state

1
<button type="button" class="btn btn-primary" disabled="disabled">Confirm selection</button>

Neutral button

1
<button type="button" class="btn btn-dark">Cancel</button>

Secondary button

1
<button type="button" class="btn btn-secondary">Save</button>

Negative button

1
<button type="button" class="btn btn-danger">Send to trash</button>

Outline button

1
<button type="button" class="btn btn-outline-secondary">Select content item</button>

Set of two buttons

When combining two buttons together emphasize the preferred primary action button with a bolded font-weight.

1
2
<button type="button" class="btn btn-dark">Cancel</button>
<button type="button" class="btn btn-danger font-weight-bold">Send to trash</button>
Yes

1
2
<button type="button" class="btn btn-dark">Cancel</button>
<button type="button" class="btn btn-danger">Send to trash</button>
No

Wide buttons

Add class ez-btn--wide when in need of a wider button in the UI.

1
<button type="button" class="btn btn-primary ez-btn--wide">Send for review</button>

Buttons with icons

Add the icon you want to your action button and specify the classes you need for it.

1
2
3
4
5
6
<button type="button" class="btn btn-primary">
    <svg class="ez-icon ez-icon--medium ez-icon--light ez-icon-create">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#create"></use>
    </svg> 
    Create
</button>

Note

We have used here a colored icon ez-icon--light as an example. If you want to dig more into icons check Icons within Resources.

Buttons in menu bars

When adding a new action button that is part of the menu bars, ez-side-menu and ez-context-menu, we use the following two options: buttons and links that look like buttons as well.

Buttons within Discovery menu bar
Buttons within the Discovery menu bar, ez-side-menu, are styled as follows:

1
2
3
4
5
6
<button type="button" class="btn btn-dark btn-block">
    <svg class="ez-icon ez-icon-browse">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#browse"></use>
    </svg>
    Browse
</button>

Link Buttons within Discovery menu bar
Links that look like buttons within the Discovery menu bar, ez-side-menu, have the same styling as buttons.

1
2
3
4
5
6
<a type="button" class="btn btn-dark btn-block">
    <svg class="ez-icon ez-icon-search">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#search"></use>
    </svg>
    Search
</a>

Buttons within Context menu bar
Buttons within the Context menu bar, ez-context-menu, allow users to interact with their specific content item. They are styled as secondary buttons.

1
2
3
4
5
6
<button type="button" class="btn btn-secondary btn-block">
    <svg class="ez-icon ez-icon-publish">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#publish"></use>
    </svg>
    Publish
</button>

Buttons in tables

When adding a new action button that is part of content listed within tables, ez-table-header, we use the following two options: buttons that are part of the header and the ones that are included within table rows.

Button in table header

1
2
3
4
5
<button type="button" class="btn btn-primary">
    <svg class="ez-icon ez-icon-create">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#create"></use>
    </svg>
</button>

Button in table rows

1
2
3
4
5
<button type="button" class="btn btn-icon">
    <svg class="ez-icon ez-icon-edit">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#edit"></use>
    </svg>
</button>
Read the Docs