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


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.


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).



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.


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.


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.


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.


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.


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.


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.



  • 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.


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

  • 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.
  • 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.