ExpressionEngine®
Style Guide

Interaction Guidelines

Buttons should be used to indicate a form submission, or a direct action to be taken.

Action buttons are never used for form submission.

Wording

Submission buttons should follow the naming convention "Save [item]"

e.g. "Save Channel"

Action buttons should follow the naming convention "[action] [type] [item]"

e.g. "Create New Channel"

Standard Button

You can create a standard button by adding a class of .btn to an a, button, or input tag.

Usage

For creating an action, or submission cue.

HTML

<a class="btn" href="">Button</a>

Visual Output

back to the top


Disabled Button Requires: Standard Button

Add a class of .disable to display a disabled button.

Usage

For preventing a user from completing an action, or submission. e.g. validation errors on a form submission.

HTML

<a class="btn disable" href="">Button</a>

Visual Output

back to the top


Working Button Requires: Standard Button

Add a class of .work to display a working button.

Usage

For indicating to the user that the action they took is processing.

HTML

<a class="btn work" href="">Button</a>

Visual Output

back to the top


Action Button Requires: Standard Button

Add a class of .action to display an action button.

Usage

For indicating a user call to action. e.g. Create New Channel

HTML

<a class="btn action" href="">Button</a>

Visual Output