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
Normal
Hover, Focus, Pressed
Disabled
.ButtonDisabled
Secondary Button
When the page has multiple actions that are not equal in usage, decrease the prominence of the less likely action.
.Button 
Secondary Button States
Normal
Hover, Focus, Pressed
Disabled
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.
.Button .Is_Default .LinkButtonPrimary
.Button .LinkButtonWhite
Icon and Text Button States
Message
Normal
Message
Hover, Focus, Pressed
Message
Disabled
Link
When you need to allow users to navigate to another page.
Link States
Link
Normal
Link
Hover, Pressed, Focus
.link-underline-hover
Link
Disabled
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.
Small
.Button .btn-small
Medium (default)
.Button
Large
.Button .btn-large
Shape
Alternative shapes with sharper and rounder edges can be used.
Sharp
.Button .border-radius-none
Soft Rounded (default)
.Button
Rounded
.Button .border-radius-rounded
Color
Colors from the Brand, Extended, Neutral and Semantic palettes can be used as alternatives to your brand’s primary and secondary colors.
Cyan
.Button .background-cyan 
Marine
.Button .background-marine
SAP
.Button .background-sap
Cyan
.Button .text-cyan
Marine
.Button .text-marine
SAP
.Button .text-sap
Tiles
Type 1 - Navigation Tiles
normal
Business Partner
disabled
.DisabledTile
Create New Business Partner
Type 2 - Admin Tiles
normal
21
Expired
pressed
+999
31 - 60 Days to expiry
Click here to see your activities