Primary buttons

We use two main button styles when designing Inmarsat products. We use Primary buttons for the most important call to action in a layout, ‘Sign up’ or ‘Download’ for example. Our Primary button style is always filled with a solid colour from the Primary colour palette (Dark Blue, Mid Blue and Dark Green). Primary buttons are available in either large or small sizes, the large size is 56px high, and the small size is 40px.


Variations




To update a buttons colour, just use the css modifier class that corresponds to the colours name, eg .inm-button--dark-green.

Secondary buttons

We use Secondary buttons for calls to action that support a primary call to action, or for actions within content heavy layouts, such as articles and tables. They can be used where the action is important, but not critical, such as ’View’ or ‘Read more’.


<button type="button" class="inm-button inm-button--chevron  inm-button--secondary">Primary Button</button>
<button type="button" class="inm-button inm-button--icon-left  inm-button--secondary">
  <img class="inm-button__icon" src="/assets/8777cad26335a111702188808178db14.svg" alt="" />Primary Button</button>
<button type="button" class="inm-button inm-button--icon-right  inm-button--secondary">Primary Button
  <img class="inm-button__icon" src="/assets/8777cad26335a111702188808178db14.svg" alt="" />
</button>
<br/>
<button type="button" class="inm-button inm-button--chevron inm-button--small  inm-button--secondary">Primary Button</button>
<button type="button" class="inm-button inm-button--icon-left inm-button--small  inm-button--secondary">
  <img class="inm-button__icon" src="/assets/8777cad26335a111702188808178db14.svg" alt="" />Primary Button</button>
<button type="button" class="inm-button inm-button--icon-right inm-button--small  inm-button--secondary">Primary Button
  <img class="inm-button__icon" src="/assets/8777cad26335a111702188808178db14.svg" alt="" />
</button>
Variations


To update a secondary buttons colour, just use the css modifier class that corresponds to the colours name, eg .inm-button--secondary--mid-blue.

Style and spacing

We have two heights for our Primary and Secondary buttons, large buttons are 56px high and small buttons are 40px high. Our buttons are based on an 8 pixel grid, so where possible we keep padding and spacing in multiples of 8px. We keep button sizes consistent across all device sizes and breakpoints.