Buttons - Base

Active State

Variant A - Text

button-large-active-A

button-small-active-a

Variant B - Icon + Text

button-large-active-B

button-small-active-B

Variant C - Icon

button-large-active-C

button-small-active-C

Inactive State

Variant A - Text

button-large-inactive-A

button-small-inactive-A

Variant B - Icon + Text

button-large-inactive-B

button-small-inactive-B

Variant C - Icon

button-large-inactive-C

button-small-inactive-C

When to use

Overall

The primary CTA is the most important button on a webpage or screen is used to execute the main action. This button should stand out and be easily identifiable by the user.

Avoid using multiple Primary CTAs on one screen. Having more than one main CTA reduces the impact, and makes it harder for users to know what to do next.

Button Size

Use a different size depending on the screen size and the space that is needed. Usually use it when:

• a primary and a secondary action need to sit next to each other

Inactive State

Use the inactive state when certain requirements are not yet fulfilled by the user and they need these to move forward.

Icon + Text State (Variant B)

Use an additional icon with the text when it adds further information or to make it more playful. However, the icon needs to be clearly related to the action and understood as the same action described by the text. description.

Icon Only State (Variant C)

Use the Variant C - Icon ONLY when the icon is clearly and universally identifiable as an action by the user.

When NOT to use

Do not use a Primary CTA for an action that goes against the goal of the screen, e.g.

• Cancel

• ‘Sign in’ next to ‘Join now’ (one needs to be primary, the other secondary)

Active State

Variant A - Text

button2-large-active-A

button2-small-active-A

Container(
    width: 151.50,
    height: 56,
    child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children:[
            Container(
                width: 151.50,
                height: 56,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: Color(0xff000f55), width: 2, ),
                    color: Color(0xfffcfcfc),
                ),
                padding: const EdgeInsets.only(left: 62, right: 63, ),
                child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children:[
                        Text(
                            "CTA",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Color(0xff000f55),
                                fontSize: 16,
                                fontFamily: "R-Flex",
                                fontWeight: FontWeight.w500,
                            ),
                        ),
                    ],
                ),
            ),
        ],
    ),
)

Variant B - Icon + Text

button2-large-active-B

button2-small-active-B

Variant C - Icon

button2-large-active-C

button2-small-active-C

When to use

Only use when:

• there is a primary action already

• OR the action is secondary to what information needs to be perceived on the screen.

Button Size

Use a different size depending on the screen size and the space that is needed. Usually use it when:

• a primary and a secondary action need to sit next to each other

Inactive State

Use the inactive state when certain requirements are not yet fulfilled by the user and they need these to move forward.

Icon + Text State (Variant B)

Use an additional icon with the text when it adds further information or to make it more playful. However, the icon needs to be clearly related to the action and understood as the same action described by the text. description.

Icon Only State (Variant C)

Use the Variant C - Icon ONLY when the icon is clearly and universally identifiable as an action by the user.

When NOT to use

Do not use this button when the action needs to be primary or is the goal of the page.

When to use

Only use when:

• The information it links to is not important for the user to complete a task

• The information sits outside of the app within a webview

When NOT to use

Do not use this style when the action needs to be primary or is the goal of the page.

Do not use this for actions that N