There are two kind of buttons: CTA link buttons and submit buttons.

CTA link buttons

We use them as links we want to make remarkable, and they will frequently be following a text. When clicked they will take us to another page.

The button text will be as short as possible and yet descriptive enough.

cta link button example

Buttons

Appearance by status and type

Primary
Secondary / outline
Default

Click me

Button: #58176E
Content: #FFFFFF

Click me

Outline and content: #58176E
Hover

Click me

Button: #990098
Content: #FFFFFF

Click me

Outline and content: #990098
Focus and selected

Click me

Button: #58176E
Content: #AAF7FF

Click me

Outline and content: #2593B5
Disabled

Click me

Button: #B6B7B7
Content: #FFFFFF

Click me

Outline and content: #B6B7B7
Button demonstration

Submit buttons

The submit button will have the same styling as the CTA button, but it won’t have any icon. This button will be place on the end of forms and other modules which need an action trigger.

Primary
Secondary / outline
Default

Click me

Button: #58176E
Content: #FFFFFF

Click me

Outline and content: #58176E
Hover

Click me

Button: #990098
Content: #FFFFFF

Click me

Outline and content: #990098
Focus and selected

Click me

Button: #58176E
Content: #AAF7FF

Click me

Outline and content: #2593B5
Disabled

Click me

Button: #B6B7B7
Content: #FFFFFF

Click me

Outline and content: #B6B7B7
Button demonstration

Buttons placement

These buttons will always be aligned with the text they complement. If the text is left-aligned so will de button be. When the text is centered, we will place the button centered as well with this module.

single column button placement examplezigzag column button placement example

Buttons usage

When there is only one action to be done, we will use the primary button.

The secondary/outline button will be used when there are two actions, and we will use it for the action we consider secondary. For example, to close a modal or go back in a form.

When a third option is needed we will use a default link in 20px #58176E. This option will be in a third place of relevance.

pop up buttons example