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.

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.

Last updated at: