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 font-weight-bold">Confirm selection</button>

Disabled state

1
<button type="button" class="btn btn-primary font-weight-bold" 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 font-weight-bold">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.
[[code_example {html} code_example]]
Yes

[[code_example {html} code_example]]
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 font-weight-bold">Send for review</button>

Buttons with icons

Add the icon you want to your action button and specify the classes you need for it.
[[code_example {html} code_example]]

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:
[[code_example {html} code_example]]

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.
[[code_example {html} Search code_example]]

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.
[[code_example {html} code_example]]

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

[[code_example {html} code_example]]

Button in table rows

[[code_example {html} code_example]]