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 <button> tag with the appropriate class and a clear text label. Additional hidden text can be added to the label if context requires so.

Example Code

Default State

let linkbutton : AALinkButton = AALinkButton(frame: CGRect.zero)
linkbutton.type = .secondary
linkbutton.isEnabled = true
linkbutton.theme = Aileron.theme //Default theme: Aileron
linkbutton.setTitle("Tap me", forState: .normal)
self.view.addSubview(linkbutton)

Disabled State

let linkbutton : AALinkButton = AALinkButton(frame: CGRect.zero)
linkbutton.type = .secondary
linkbutton.isEnabled = false
linkbutton.theme = Aileron.theme //Default theme: Aileron
linkbutton.setTitle("Tap me", forState: .normal)
self.view.addSubview(linkbutton)