Components

Top Bar

Overview

Top Bar actions are global to the 3DCS Web viewer experience. They also are relative to the Product/service experience that embeds the Web viewer (except the "help" universal action).

Composition

Primary actions

Primary actions are the most important global actions. They are optional. They are S2 button (M), primary, fill and outline style. 3DCS Design recommendation is not to have more than 2 primary actions.

Secondary actions

Secondary actions are less important than Primary actions. They are quiet, no label S2 action buttons. To avoid too much density in the Top Bar, 3DCS Design recommendation is not to have more than 3 secondary actions. Above 3, prefer using the "more" action button.

Behaviors

Elements states

Buttons and Action buttons states are based on Spectrum 2 recommendations.

• Action buttons (M)
• Has icon (no label)
• Quiet

• Button (M)
• Fill
• Primary
• Has label

• Button (M)
• Outlined
• Primary
• Has label

Tooltips

Tooltips are aligned right. They appear on hover over each element of the Top Bar.

Panels on click