Buttons

Users click on buttons to trigger a variety of page interactions. The label indicates calls to action and directs the user to next steps.

Buttons helps users carry out an action, such as:

  • Starting a new task
  • Trigger a new UI element on the page.
  • Submit a form
  • New or subsequent steps in a process

Sizes

Buttons come in four different sizes. These sizes correspond to the sizes of other form elements. Please only use the button sizes that have been given. Button widths are auto-sized by default, but they may be customized to suit the whole width of their container.

States

A button's state informs users about what's possible and what's possible in a user interface. All of our button types have 4 different states: Default, Hover, Active, Disabled and Loading(Primary button only).

Button
Default
Button
Hover
Button
Active
Button
Disabled
Loading

Types

Each button type serves a specific purpose, and its design communicates this to the user. Consistency in implementing choices across products is crucial to accurately direct user interactions.

Primary

Used for the principal call to action for featured or specific digital products or actions. If possible, this primary blue (Blue 400) button should be limited to one or two per page to stress its importance to the user.

See the Pen Button - Primary by USANA UX (@usana_ux) on CodePen.

Secondary

Used for secondary actions not considered a high priority or the main CTA for an action or product.

See the Pen Button - Secondary by USANA UX (@usana_ux) on CodePen.

Tertiary

Used for actions not considered a high priority or the main CTA for an action or product. May be used in place of text links for products or continued action

See the Pen Button - Tertiary by USANA UX (@usana_ux) on CodePen.

Shop

Used as the primary CTA in USANA shop. These buttons can have multifaceted options for primary, split, and dropdown versions.

See the Pen Button - Shop by USANA UX (@usana_ux) on CodePen.

Icon

Contain text or can be an icon.

See the Pen Button - Icon by USANA UX (@usana_ux) on CodePen.

Dropdown & Split

Gives users the option to select a single value from a list of choices. Split buttons have both a label and an arrow. Clicking the label selects a default action, and clicking on the arrow opens a list of other actions.

See the Pen Button - Dropdown & Split by USANA UX (@usana_ux) on CodePen.

Notifications

Dropdown buttons give users the option to select a single value from a list of choices. When using buttons for notifications or another purpose, please adhere to the guidelines for color selection.

See the Pen Button - Notification by USANA UX (@usana_ux) on CodePen.

Guidelines

Anatomy

  • Container: The primary element in which content, color, and icons are contained.
  • Label: Text indicates the result of clicking the button.
  • Icon: Enhances the call to action.

Specifications

Developers and designers can use these specs to build pixel perfect buttons.

Do
  • Use clear and concise language to define the buttons action accurately.
  • Use the verb + noun formula to create you button labels.
  • Keep character limit for button labels to 40 characters or less.
Don't
  • Use long, redundant labels.
  • Use all caps and title case capitalization.
  • Use vague and or generic labels like “Click here” or “Read more”.
  • Use multiple primary buttons on the same page.