EUAA Design System

Buttons

Buttons indicate something that is clickable and are used to initiate and perform an action. Various button styles exist and these can be seen in the list below.

Always label the buttons correctly with the action that they do.
For primary actions such as save, continue and other primary actions always use the primary button style.
For secondary actions such as cancel, always use the secondary button style.
For other actions and call to actions use the ghost button style or alternate ghost button style.

Button Variants

<button class="euaa-btn euaa-btn--primary">Primary Button</button>
<button class="euaa-btn euaa-btn--secondary">Secondary Button</button>
<button class="euaa-btn euaa-btn--ghost">Ghost Button</button>

Another type of button is the alternate ghost button. This is only to be used on dark backgrounds.

<button class="euaa-btn euaa-btn--ghost-alt">Alternate Ghost Button</button>

Sizes

<button class="euaa-btn euaa-btn--primary euaa-btn--small">Small Primary Button</button>
<button class="euaa-btn euaa-btn--secondary euaa-btn--small">Small Secondary Button</button>
<button class="euaa-btn euaa-btn--ghost euaa-btn--small">Small Ghost Button</button>

<button class="euaa-btn euaa-btn--primary euaa-btn--large">Large Primary Button</button>
<button class="euaa-btn euaa-btn--secondary euaa-btn--large">Large Secondary Button</button>
<button class="euaa-btn euaa-btn--ghost euaa-btn--large">Large Ghost Button</button>

States

<button class="euaa-btn euaa-btn--primary" disabled>Primary Button</button>
<button class="euaa-btn euaa-btn--secondary" disabled>Secondary Button</button>
<button class="euaa-btn euaa-btn--ghost" disabled>Ghost Button</button>

Using the input tag

Instead of the button tag, the input type="submit" can also be used.

<input type="submit" value="Primary Button" class="euaa-btn euaa-btn--primary">
<input type="submit" value="Secondary Button" class="euaa-btn euaa-btn--secondary">
<input type="submit" value="Ghost Button" class="euaa-btn euaa-btn--ghost">