Call to Action

Add call to actions for buttons throughout your site

CTA (Call to Action) design tokens control the look of buttons, tabs, accordion titles, and Menu items across your site. Configure them once to ensure all interactive elements stay consistent and on-brand.

• CTAs reference typography tokens for text styling. Configure typography first, then connect CTAs to them.

• Each CTA token includes multiple states (default, hover, selected, etc.) so users always see the right style during interactions.

• Nyla includes a set of global CTA tokens by default (e.g., Primary, Secondary, Text Link). You can edit these or add your own custom CTA tokens.

Editing and Managing CTAs

1. Navigate to Design → Calls to Action.

2. Select an existing CTA token to edit, or click + Add CTA to create a new one.

3. Configure your settings:

   • Choose Style (Type Style or Inherit) - this will be Type Style in most cases. See about Inherit here.

   • Configure typography, colors, padding, background, borders, shadows, etc.

   • Add icons if needed.

4. Configure all states (see below).

5. Save your changes - they appear in Draft.

6. Queue and publish to make them live.

CTA States

CTA tokens have multiple states. Configure each to ensure correct appearance:

• Default: Normal appearance of the CTA.

• Hover: When a user hovers over the CTA.

• Selected: When a button links to the current page or a button/tab/accordion is active.

• Disabled: For inactive buttons; should appear clearly distinct.

• Scrolled Hover: Used when CTAs appear in sticky headers or after scroll events.

CTA Fields: 

CTA design tokens have the following fields: 

• Description

• Style

  • Type Style: Text styling is defined in the CTA itself (recommended for buttons).

  • Inherit: Text styling inherits from surrounding Rich Text. Use for inline links. (The default Text Link CTA token uses this.)

• Typography: Reference a typography token for CTA text.
• Text color: Color of the text.
• Text alignment: Align text inside the CTA.
• Padding: Space inside the CTA (top, bottom, left, right). 
• Background: Image, ratio, background color.
• Border: Width, color, radius, style.
  
• Opacity: Transparency level.
• Shadow: Configure drop shadow for depth.
• Underline: Optional underline treatment.
• Transform: Translate (X, Y, Z), Perspective, Rotate, Scale (X, Y), Horizontal/Vertical Anchor Point  
• Transition: Configure hover/interaction transitions (duration, easing).

Icon Element:

You can include an icon on your CTA design token by using the Icons element.

The element has settings for you to upload your icon as well as setting its size, position and color and spacing relative to the CTA text. 

Style Inherit

Nyla sites include a global CTA token named Text Link, which is set to Inherit by default.

• What this means: When you add a link in Rich Text, it automatically uses the Text Link token. Because it’s set to Inherit, the link text inherits its typography styles and colours from the surrounding text block. 

Best Practices

• ✅ Keep Primary and Secondary CTAs visually distinct.

• ✅ Make hover and selected states obvious and accessible.

• ✅ Use clear, descriptive names for custom CTAs (e.g., Promo Button, Footer Link).

• ✅ Limit the number of CTA variations to keep dropdowns manageable.

• ❌ Avoid inconsistent padding or icon sizing — test across devices.

• ⚠️ Always configure Disabled state for accessibility.

Common Pitfalls

• Rich Text links not styled correctly? → Ensure the "Text Link" CTA token is set to Inherit.

• Button text looks wrong? → Check the CTA is referencing the correct typography token.

• Hover state doesn’t appear? → Verify the hover style is configured in the CTA token.

• Site-wide changes unexpected? → Editing a global CTA token updates all CTAs that use it.