Calls to action

Overview

A call to action (CTA) is an interactive element that prompts users to take a specific action. GitLab Duo CTAs follow button and link guidelines, with some additional considerations.

Guidelines

Icon

When reasonable, use an AI-specific icon to set expectations about a CTA's relationship to AI. For Duo Chat features, use the duo-chat icon. For other AI features, use the tanuki-ai icon.

Do	Don't

Color

There is no specific color associated with AI or GitLab Duo. The color of the icon follows the component-specific guidelines, like button variants. This differs from marketing, which has specific colors for the GitLab Duo visual identity.

Label

Avoid CTA labels with "GitLab Duo" or "AI" to keep them simple and brief. Instead, indicate that the feature is AI-powered through onboarding, supplemental UI copy, or iconography. For guidance on how to use "GitLab Duo" in the UI, refer to the AI transparency guidelines.

Do	Don't

Feature maturity

When a feature is experimental or beta, display that information with a badge outside of the CTA. See also: how to highlight feature versions.

Do	Don't

Styling and importance

The highest priority action should have the most noticeable CTA.

When GitLab Duo is off, AI CTAs usually disappear, which can change how the page looks. If an AI action was the main CTA:

• Choose a new main action.
• Adjust the page layout accordingly.

Always make sure the page makes sense, with or without AI actions.

GitLab Duo is on	GitLab Duo is off