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).
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.
Secondary
Used for secondary actions not considered a high priority or the main CTA for an action or product.
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
Shop
Used as the primary CTA in USANA shop. These buttons can have multifaceted options for primary, split, and dropdown versions.
Icon
Contain text or can be an icon.
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.
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.
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.
- 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.