Calls to action for GitLab Duo

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.

DoDon't
Default button with tanuki-ai icon
Button uses AI-specific icon.
Default button without tanuki-ai icon.
Button omits AI-specific icon.

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.

DoDon't
Button with label: Summarize comments
Button label is simple and brief.
Button with label: Summarize comments with GitLab Duo
Button label is too complex and long.

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.

DoDon't
Feature maturity is indicated outside of the CTA with a Beta badge embedded in UI copy
Feature maturity is indicated outside of the button.
An AI button containing a Beta badge
Feature maturity is indicated in the button.

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 onGitLab Duo is off
AI button is primary confirm
AI button is not shown, other button is primary confirm

Last updated at: