Clay Buttons
Buttons come in several types and variations. This tutorial covers the different styles and variations of buttons you can create with the Clay taglibs.
Types
Primary button: Used for the most important actions. Two primary buttons should not be together or near each other.
Primary button with label:
Secondary button: Used for secondary actions. There can be multiple secondary buttons together or near each other.
Borderless button: Used in cases such as toolbars where the secondary button would be too heavy for the design. This keeps the design clean.
Link button: Used for Cancel actions.
You can use labels or icons for your buttons. Below is an example of a Primary button with an icon:
You can disable a button by adding the disabled
attribute:
Variations
Button with icon and text:
Button with monospaced text:
Block level button:
Plus button:
Action button: