Solaris Design System

Context menu

Context menus are small buttons that dropdown a list of options that users can select.

Types Emotive
Type: body-emotive
Height: 48px
Padding button: 16px
Padding dropdown: 11px 16px 		Productive
Type: body-productive
Height: 40px
Padding button: 13px
Padding dropdown: 10px 12px		 Inline
Type: body-inline
Height: 32px
Padding button: 9px
Padding dropdown: 5px 8px
:links Links emotive theme light Links emotive theme dark Links productive theme light Links productive theme dark Links inline theme light Links inline theme dark
:actions Actions emotive theme light Actions emotive theme dark Actions productive theme light Actions productive theme dark Radio inline theme light Actions inline theme dark
:radio Radio emotive theme light Radio emotive theme dark Radio productive theme light Radio productive theme dark Radio inline theme light Radio inline theme dark

Positions

Positions Left-lower Left-upper Right-upper
Is always displayed on side of the btn

Position is determined by the position of the btn in the UI

Is only displayed above btn when there is no room below on UI		 Position left lower theme light Position left lower theme dark Position left upper theme light Position left upper theme dark Position right upper theme light Position right upper theme dark

Usage

Context menus for a non invasive button where there are multiple options available. These are often used wehre there are space constraints.

An example for this is in Codebots platform teams page, where a team member’s card has the context menu available for the user to click and select multiple actions to that user.