IDEATE & PLAN
DESIGN & DEVELOP
Corporate account services
Buttons express what action will occur when the user clicks or touches it. They are used to initialize an action.
Here is a demo of most common buttons. You can click on it, inspect their code or head over to the developer documentation for a more comprehensive list.
Buttons have five states. The first two ones are static states while the others are results of user interaction.
Buttons offer 3 different sizes depending of the usage. Large is often combined with headlines or display titles for distinct call-to-action. Normal is the go to standard for most of the needs. Dense version should be prefered when dealing with great amount of data.
Contained buttons are commonly used for primary actions. They usually use primary color (Violet) but may use secondary (Fuchsia) to add more contrast on darker backgrounds. You can add icons to the left of the text when necessary.
Our FAB button uses Finastra's gradient to draw attention while adding distinctive branding. It is usually positioned on top of everything else. We recommend usage of FAB button for additive actions like creating new items.