PrimaryButton

Specialized button for denoting the primary action on the page.

Basic usage

Use the prop 'variant' to specify what type of button to use. variant: 'blue' (default) | 'haiti' | 'yellow' | 'white'

Blue

Haiti

Yellow

White

The trusted sidekick, secondary button

The PrimaryButton is often used alongside the (SecondaryButton) and the (TertiaryButton), like in the following example.

Blue

Haiti

How does it differ from <Button>?

The main difference is that this button doesn't lend itself to be overridden with the tw-prop and its styling are considered final. This is important because we want our users to consistently recognize the intention behind this button across multiple uses cases (e.g. "clicking this button will resolve the current actionable").

This guide is based on version: 4.1.2