Marble Design System

Buttons

The Primary Button is used to guide the user to the principal action of the experience, such as buying tickets. There should only be one Primary Button within a component, so the main path forward for the user is always clear.

Secondary Buttons are used for actions that are assistive or helpful but not necessary to achieving a complete user journey (e.g. for anchor links in the Jumplink Hero Banner).

Tertiary Buttons are additional multi-purpose buttons that serve as stand-alone call to actions that either link to other parts of the experience or control a state like opening and closing a text drawer.

Icon buttons are a text link with a supporting visual symbol. The icon field always pulls from the Marble Icon Library, which are all square SVGs with consistent styling.