Buttons

Buttons allow an application to communicate action and direct user intent. Consistent button styles make it easier for a user to recognize areas to take action across an application.

Usage

There are three types of buttons in Calendso. These are used to visually distinguish between the buttons in a hierarchy, and communicate actions and user intent.

Solid buttons

Solid buttons deliberately look heavy in order to direct the user's attention to the action that the application is encouraging the user to take.

Outline buttons

The outline button provides a lighter weight button style. It is commonly used to emphasize a secondary action that complements a primary action or to reduce visual clutter when a number of important actions appear on the page.

Flat buttons

The flat button can be used in multiple situations. It can be used as a tertiary button. It can also be used inline because it is distinct in style and can be recognized as a button.

Buttons vs Links

It is important to use a link (or anchor element) anytime clicking the element will direct you to another page. However, buttons can be given similar visual treatments.In the current page, you can interact by clicking buttons to refresh the content or submit a form.

Placement

There are two distinct patterns when it comes to the placement of a button.

Z Pattern

When tasks are organized from the top-left to the right bottom side of a container, followed by an action caller at the bottom-right of the container, the Z-pattern is a natural way for the user to navigate through content.

Modals and Wizards follow the Z Pattern

F Pattern

The F-pattern is a natural way to go through content in an unconstrained container, such as a form on the page itself. The user will read the content line-by-line, arriving at a call to action at the end.

Forms and Cards follow the F Pattern