Buttons

Best practices

Primary

Using ALEX Yellow, our primary buttons draw the eye’s attention. They should only be used for important calls to action with an appropriate visual hierarchy. Hover the button to see the hover/active state.

Quick Code Snippets

<button class='btn'>Button txt</button>

<a class='btn'>Button txt</button>

Secondary

Using ALEX Yellow, our primary buttons draw the eye’s The secondary button supports the primary button, therefore we use ALEX Ink for component clarity and simplicity. It should be used in groups with the primary button, or when calling less attention to the action than a primary button would. Hover the button to see the hover/active state.

Quick Code Snippets

<button class='btn btn-secondary'>Button txt</button>

<a class='btn-secondary'>Button txt</button>

Disabled

This is what a button looks like when it is non-functional and unclickable. The appearance is the same for primary and secondary buttons.

Quick Code Snippets

<button class='btn' disabled>Button txt</button>

Content

There are three content combinations available.

Default

+ Icon

The icon is always placed to the right of text within the button boundary.

Icon only

Composite guidelines

. Yes .

Accompany a primary button with a secondary button when necessary.

. ! Caution .

Try to avoid positioning two primary buttons immediately next to each other; they compete for the user’s attention.

Copy guidelines

Keep button copy consistent throughout ALEX to create platform-wide understanding.

All buttons should be sentence case, capitalizing only the first letter of the first word. Proper nouns are the exception to this rule, whether external or platform-specific.

Include articles like “the” and “a” for clarity, but otherwise try for brevity.

. Yes .

Use sentence case and articles.

. Don’t .

Include unnecessary words (new) and capitalize all words.