UI Patterns → Action Buttons and Links

Buttons & Links Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum erat ullamcorper erat vulputate fermentum. Morbi posuere neque et lacus tempor ultricies. Nullam sapien nisi, ullamcorper in mollis volutpat, fermentum vel lorem.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur pretium diam ut quam sagittis pretium.

Pattern and Usage

When deciding whether to use button or link on your module, make sure it brings a focus to a certain action to distigush primary vs. secondary command. For example, buttons have a more prominent with its look and feel. Therefore, it's easier to capture users attention and is recommended to use as a primary action.

So what qualifies as a primary action? The answers is if an action pursued to be a most commonly use and obvious for users such as "save", "update", " add", "proceed to next step", "checkout", and so forth. Button should be used in this case.

Links, on the other hand, are considered to be less visually noticable than button therefore considered as secondary action. It is recommended to use when that action isn't as important as the main ones. Use links in scenarios such as "cancel", "delete", "return", and so forth.

NOTE: the CSS on the CSS Tab is designed for many senarios of buttons, links, and their look and feel.