Button

Buttons express what action will occur when the user clicks or touches it. They are used to initialize an action.

Demolink

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.

Typeslink

Contained

For the principle call to action on the page, here is the enabled version.

Outlined

For secondary actions.

Text

When an action does not require primary dominance on the page.

Contained with icon

When words are not enough, icons can be used in buttons to better communicate what the button does.

Icon

Icon used alone to identify an element or category.

FAB button

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.

Stateslink

Buttons have five states. The first two ones are static states while the others are results of user interaction.

Contained

button states contained

Text

button states text

Outlined

button states outlined

Icon

button states icon

FAB

button states fab

Sizeslink

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.

Large

Normal

Dense

Usagelink

contained buttonContained button

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.

fab buttonFAB button

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.