Buttons

The size of the buttons can be modified using the font-size classes.
On this page we only exemplify the sizes present in the Figma file.
To apply the style disabled add the class os-disabled, except the button bright blue.

Action [Red]

Action Red

.os-btn-action

Style to be applied to any main CTA when over light or dark background.










Action Red Inverted

.os-btn-action-inverted

Style to be applied to any 2nd level CTA when over light or dark background. It can and should be used when you have 2 concurring CTAs to demonstrate hierarchy.











Confirmation [Green]

Confirmation Green

.os-btn-confirmation

Confimation Light BG Style to be applied to any confirmation action CTA when over light background.











Utility [Blue]

Utility Blue

.os-btn-utility

Confimation Light BG Style to be applied to any confirmation action CTA when over light background.










Utility Blue Inverted

.os-btn-utility-inverted

Confimation Light BG Style to be applied to any confirmation action CTA when over light background.










Action Light [White]

Action Light

.os-btn-action-light

Style to be applied to any main CTA when over dark or red background.










Action Light Inverted

.os-btn-action-light-inverted

Style to be applied to any 2nd level CTA when over dark or red background. It can and should be used when you have 2 concurring CTAs to demonstrate hierarchy.










Action Dark [Space Blue]

Action Dark

.os-btn-action-dark

Style to be applied to any main CTA when over yellow background.










Action Dark Inverted

.os-btn-action-dark-inverted

Style to be applied to any 2nd level CTA when over yellow background.
It can and should be used when you have 2 concurring CTAs to demonstrate hierarchy.










Bright Blue

Bright Blue

.os-btn-brightblue

This style was created to perform an a / b test. It should not be used until it is defined as part of the corporate website style.