BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Buttons

Variations

There are 11 variations of buttons.

1. Primary button

Buttons variations primary

Primary buttons are used to complete the primary action of the page or section. Text in the primary button should be action oriented. Only one primary button should be used within one form or group of content. Button background is MetLife Blue 2 (#007ABC) and text is white (#FFFFFF).

2. Secondary button

Buttons variations secondary

Secondary buttons are used to complete an alternative action in conjunction with the primary action. Only one secondary button should be used at the same time within a form or content block. Use text links for tertiary actions. The outline and text are MetLife Blue 2 (#007ABC).

3. Text link

Buttons variations text link

Text links are used as a call to action, or as a less important action in conjunction with buttons. Use text links if there is not enough room for a button. If consecutive data rows in a table require an action, use text links instead of buttons, to ensure a user is not visually overwhelmed. The link text color is MetLife Blue 2 (#007ABC).

4. Primary button with icon

Buttons variations primary with icon

Button text can be supplemented with an icon that eludes to the button’s destination.

5. Secondary button with icon

Buttons variations secondary with icon

6. Text link with icon

Buttons variations text link with icon

7. Round button with icon

Buttons variations round with icon

The round button with chevron is used to open a menu, like the contextual navigation menu. The button is MetLife Green 2 (#A4CE4E).

8. Small round button

Buttons variations round outline with icon and text

Small round buttons allow users to select an option, execute an action, or navigate within a menu. Small round buttons are not used for the primary action in a page or form. These can appear with or without text.

9. Large round button

Buttons variations round with icon and text

Large round buttons allow users to select an option, execute an action, or navigate within a menu. Large round buttons are not used for the primary action in a page or form. Because the button is white, they should only be used on a dark background.

10. Sticky button

Buttons variations text link

To allow constant access to a button, it remains fixed at the bottom of the screen.

11. Top button bar

Buttons variations text link

The top button bar provides supplemental navigation within a page. It can be used to launch a transactional experience, or to toggle between two screens of like content. Icons in the top button bar are MetLife Blue 2 (#007ABC) and text is MetLife Darkest Gray (#333333). The background of the top button bar is white (#FFFFFF).

States

Primary button

Default

Buttons state primary default

Primary button in the default state is MetLife Blue 2 (#007ABC) and text is white (#FFFFFF).

Pressed

Buttons state primary pressed

Primary button in the pressed state is MetLife Blue 3 (#0061A0) and text is white (#FFFFFF).

Focused

Buttons state primary focused

Default on dark

Buttons state primary default on dark

Primary button on dark in the default state is MetLife green (#A4CE4E) and text is MetLife Darkest Gray (#333333).

Pressed on dark

Buttons state primary pressed on dark

Primary button on dark in the pressed state is MetLife green (#91B55C) and text is MetLife Darkest Gray (#333333).

Focused on dark

Buttons state primary default on dark

Secondary button

Default

Buttons state secondary default

Secondary button in the default state outline and text is MetLife Blue 2 (#007ABC).

Pressed

Buttons state secondary presses

Secondary button in the pressed state is MetLife Blue 2 (#007ABC) and text is white (#FFFFFF).

Focused

Buttons state secondary focused

Default on dark

Buttons state secondary default on dark

Secondary button in the default state on dark has a white (#FFFFFF) outline and text.

Pressed on dark

Buttons state secondary pressed on dark

Secondary button in the pressed state on dark has a white (#FFFFFF) background and MetLife Blue 2 (#007ABC) text.

Focused on dark

Buttons state secondary default on dark

Text link

Default

Buttons state text link default

Default text link is MetLife Blue 2 (#007ABC).

Pressed

Buttons state text link presses

Pressed text link is MetLife Dark Blue (#0061a0).

Focused

Buttons state text link focused

Default on dark

Buttons state focus text link default on dark

Default text link on dark is white (#FFFFFF).

Pressed on dark

Buttons state focus text link default on dark

Pressed text link on dark is white (#FFFFFF).

Focused on dark

Buttons state focus text link default on dark

Primary button with icon

Default

Buttons state primary with icon default

Default text is white (#FFFFFF).

Pressed

Buttons state primary with icon pressed

Pressed text is white (#FFFFFF).

Focused

Buttons state primary with icon focused

Secondary button with icon

Default

Buttons state secondary with icon default

Default outline and text are MetLife Blue 2 (#007ABC).

Pressed

Buttons state secondary with icon pressed

Pressed background is MetLife Dark Blue (#0061a0) and text is white (#FFFFFF).

Focused

Buttons state secondary with icon focused

Text link with icon

Default

Buttons state text link with icon default

Default text is MetLife Blue 2 (#007ABC).

Pressed

Buttons state text link with icon pressed

Pressed text link is MetLife Dark Blue (#0061a0).

Focused

Buttons state text link with icon focused

Round button with icon

Default

Buttons state round with icon default

Default round button is MetLife Green (#A4CE4E) and icon is MetLife Darkest Gray (#333333).

Pressed

Buttons state round with icon pressed

Pressed round button is MetLife Green (#A4CE4E) and icon is MetLife Darkest Gray (#333333).

Focused

Buttons state round with icon focused

Small round button

Default

Buttons state small round default

Default small round button has a MetLife Blue 2 (#007ABC) outline and icon.

Pressed

Buttons state small round pressed

Pressed small round button has a MetLife Blue 2 (#007ABC) outline and icon.

Focused

Buttons state small round focused

Default on dark

Buttons state small round focused

Default small round button on dark has a white (#FFFFFF) outline and icon.

Focused on dark

Buttons state small round focused

Focused on dark

Buttons state round outlined with icon and text focused

Large round button

Default

Buttons state small round default

Default large round button has MetLife Blue 2 (#007ABC) text and a white (#FFFFFF) background.

Pressed

Buttons state small round pressed

Focused

Buttons state small round focused

Top button bar

Default

Buttons state text link with icon default

Default top button bar with two options.

Secondary

Buttons state text link with icon pressed

A button in the top button bar can act as a toggle to switch between screen views.

Usage

Buttons allow users to take an action.

Text link and Primary button

Buttons usage text link and primary

Primary and secondary buttons

Buttons usage primary and secondary

Primary button

Buttons usage primary

Text link and large round button

Buttons usage text link and round with icon and text