Aileron

Primary Button

Storybook

Primary button

A primary button allow users to take actions, and make choices, with a single tap.

Usage Guidelines

Buttons are aligned to the right hand side of a page. In some cases where there are form fields that need an approximate action, the button can be placed at the right end of a row if there are 1-3 form fields before.

Text label

Describe the action that will occur if a user taps a button. For maximum legibility, don’t wrap text.

Size

Buttons take the size of their container, spanning a minimum of 3 columns in the foundation grid.

Hierarchy

A layout should contain a single prominent button that makes it clear that other buttons have less importance in the hierarchy. Emphasis is conveyed with styling:

  • High emphasis: Primary buttons
  • Medium emphasis: Secondary buttons
  • Low emphasis: Text links

Accessibility

Use a 

<!-- Primary button -->
<button type="button" name="button1" id="button1" class="button primary">
    Primary button
</button>


<!-- Primary button (disabled) -->
<button type="button" name="button2" id="button2" class="button primary" disabled>
    Primary button
</button>


<!-- Primary button (icon) -->
<button type="button" name="button-icon-1" id="button-icon-1" class="button primary">
    Primary button
    <span class="icon-newpage" aria-hidden="true"></span>
    <span class="show-for-sr">, opens another site in a new window that may not meet accessibility guidelines.</span>
</button>


<!-- Primary button (expanded) -->
<button type="button" name="button-exp-1" id="button-exp-1" class="button primary expanded">
    Primary button expanded
</button>