Buttons
Provides a button that users can click to trigger an action, submit data or navigate to another screen.
Primary Button
When the page has multiple actions that are not equal in usage, elevate the prominence of the most likely action.
.Button .Is_Default
Primary Button States
Secondary Button
When the page has multiple actions that are not equal in usage, decrease the prominence of the less likely action.
Secondary Button States
Cancel Button
When you need to allow users an “emergency exit” out an unwanted state without having to go through an extended dialogue.
.Button .text-neutral-8
Cancel Button States
Icon and Text Button
When you need to improve the communication of the meaning of an user action. This variation only works with Link Widget.
Icon and Text Button States
Link
When you need to allow users to navigate to another page.
Link States
Button Style Classes
For preview purposes, please consider the “Button” widget above. These styles are applicable to all button variations.
Size
Customize the size of the pattern to change its emphasis accordingly.
Shape
Alternative
shapes with sharper and rounder edges can be used.
Color
Colors from the Extended, Neutral and Semantic palettes can be used as alternatives to your brand’s primary and secondary colors.