Morningstar Design

Anatomy

Label sets the label of the button.
Caret down/up icon shows that there are options. Show the icon only when the parent section has one or more children.
Underline represents the active section on the page. It is present in the active and hover state.

When to Use

Use only on navigation components: the top hat, site nav, page nav, and nested nav.

When Not to Use

Don’t use as a standard CTA to execute regular actions.

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


Variation	Purpose	Icon	Sizes	Colors
Navigation	Use for menu options in the top hat, site nav, page nav, and nested nav.	With icon (parent and child options), no icon (only parent option)	XL, LG, MD, SM	Neutral, white

With Icon

Add a caret-down icon when the parent option has children.

No Icon

No icon should appear when the parent option has no children.

Navigation Button Without Icon — No icons are used.

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 navigation buttons is 24px.

Alignment

The alignment of the navigation buttons in their container should follow a right-justified pattern. The navigation component and its alignment change for the MD and SM view-ports.

Navigation Button graphic reference of how to align the buttons well on a container. — Do place the navigation buttons at the right of the navigation bar.

Navigation Button graphic reference of how to align the buttons wrong on a container. — **Don’t** place the navigation buttons following the logo, left-aligned.

Sizing affects text size, icon size, and internal padding. The default size is large, and you can use props to make the button smaller or larger. In case of the primary button in red color, we recommend using it only in the XL and LG sizes for accessibility.