Buttons are a core element that provide simple and clear ways to interact with our digital assets.

Examples

Button Sizes

Default Size

Attribute Value
Font Size 16px
Font Family Gotham SSm Med
Corners 8px
Inner Top and Bottom Spacing 16px
Inner Left and Right Spacing 24px
Minimum Width 96px

Small Size

Attribute Value
Font Size 14px
Font Family Gotham SSm Med
Corners 8px
Inner Top and Bottom Spacing 12px
Inner Left and Right Spacing 16px
Minimum Width 72px

Buttons with Icons

Primary Button — Default Size

Financial Analytics On-Demand

Primary Button — Small Size

Financial Analytics On-Demand

Secondary Button — Default Size

Financial Analytics On-Demand

Secondary Button — Small Size

Financial Analytics On-Demand
Attribute Value
Icon Font Size 14px
Text Font Size 16px
Text Font Family Gotham SSm Med
Corners 8px
Inner Top and Bottom Spacing 16px
Inner Left and Right Spacing 24px
Minimum Width 96px
Attribute Value
Icon Font Size 12px
Text Font Size 14px
Text Font Family Gotham SSm Med
Corners 8px
Inner Top and Bottom Spacing 12px
Inner Left and Right Spacing 16px
Minimum Width 72px

Button Hierarchy

Primary

Default State
Hover State
Focused State
Active State

Apply both the hover and focus styles

Disabled State

Secondary

Default State
Hover State
Focused State
Active State

Apply both the hover and focus styles

Disabled State

Flat Secondary

These buttons are the same as the Secondary Buttons but with the shadow removed from the default and hover states.

Default State
Hover State
Focused State
Active State
Disabled State

Tertiary

Default State
Hover State
Focused State
Active State

Apply both the hover and focus styles

Disabled State

Space Between Adjacent Buttons

Both the horizontal and vertical space between two adjacent buttons should be 16px.

Vertical Example

Horizontal Example

Special Button Types

Load More

  • Start with the Default Size and Secondary styling defined above.
  • Text Alignment
    Center
  • Width
    100% of the container
  • Max Width
    686px

Microform Attached Button

  • Start with the Small Size and Secondary styling defined above.
  • Remove the radius from the left corners.
  • See Form Elements for field styles

OpinionLab Docked Button

  • Uses the primary small button style
  • The shadow is removed
  • Stays docked to the right side of the browser

Inline submits

Submits that are inline and leave the user on the same page in the same context have a special treatment that indicates that the submit was performed by swapping out the button for a spinner. Once the submit is complete, the button is swapped back and the user can resubmit if necessary. An alternate use case is that the spinner will be replaced by a success or error message. Swapping out the button for a spinner also prevents an accidental or unintentional re-submit.

Button to Spinner back to Button example
Button to Spinner to Success Message example

Ghost Buttons

Ghost buttons are not a Cigna standard; use a primary, secondary or tertiary button style instead. Ghost buttons -- buttons with a colored border but no color fill -- get the name “ghost” to describe their transparent nature. Since they lack a fill color, they take on the background’s appearance (frequently a photograph). A call to action button should be a strong visual cue that attracts the user’s attention and calls them to select it. A ghost button’s minimal appearance lacks a strong visual cue; A/B studies with standard filled buttons show a lower click through rate for ghost buttons.