Morningstar Design

Anatomy

Circle outline contains the social icon and gives the button its shape.
Icon is used for a social media or share icon.

When to Use

Use only for social media icons or the share icon to allow the user to share content.

When Not to Use

Don’t use as a standard CTA to execute regular actions or with any icons other than the ones mentioned.

There is only one type of social button, with no variations.


Variation	Purpose	Icon	Sizes	Colors
Social icon	Use to present icons for sharing purposes, like social media icons and the link icon.	With icon (social media icon, link icon).	XL, LG, MD, SM	Neutral, white

With Social Media Icon

Use the social media icons when the user can share the content on social media.

With Link Icon

Use the link icon for the user to have a shareable link to the content.

Spacing

A button container can add standard spacing between buttons. Ensure that proper space is given between each button when placed next to each other. The standard distance between social icon buttons is 8px.

Alignment

The alignment of social media buttons with their container or content at the same level of the page should follow a left-justified pattern.

Social Button Container Aligned right — Do place the social media buttons on a separate line when there are other component groups.

Social Button Container Aligned wrong — **Don’t** place the social media buttons after another component group on the same line.

Sizing affects icon size, and internal padding. The default size is extra large, and you can use props to make the button smaller or larger. We recommend using the red primary only in the XL and LG sizes for accessibility.

Buttons

Anatomy

Usage

When to Use

When Not to Use

Variants

With Social Media Icon

With Link Icon

Container

Spacing

Alignment

Sizing

Themes

Buttons

Cards