--- title: CTA Button tags: Atom --- # Atom: CTA Button ###### **Control Code:** `AT.CTAB` <!-- ![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image) --> ## About This Component The Call to Action button is an atom intended to be used as an element within other components in the design system. CTAs are an important part of a website's content strategy, allowing a user to quickly locate key actions on a site page, such as how to access an important contact form. Individual components' usages of CTAs can be found within each component's page of this site. <!-- ### Usage Guidelines :::info *TODO: Novartis to write.* ::: General guidelines for using this component. Include any information the user will need to know but that may not fit into the below annotated breakdown of the individual requirements for the component. :::info *TODO: Placeholder content below.* ::: While the system does sometimes use a smaller variation of the CTA Button in a some specific limited components, such as the [Primary Navigation](/primary-navigation), the user has no ability to choose the size of the button themselves. By default CTA Buttons use the standard size, and components will show when it uses the smaller size. The size of the button does not affect any configuration options. ### Related Components :::info *TODO: Novartis to write. May not be needed for this component.* ::: A list of other components that are related. Consider what other components may be useful based on the structure or format of information and if there are any specific limitations that can be overcome by using a different component. - **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one. - **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one. ### Accessibility :::info *TODO: Novartis to write.* ::: Specific accessibility considerations and recommendations for this component. --> ## Primary Configurations | **Extra Large Breakpoint (Desktop)** | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** | | -------- | -------- | -------- | | ![](https://hackmd.io/_uploads/BkI2IGvV5.png) | ![](https://hackmd.io/_uploads/ByjhIGwE9.png) | ![](https://hackmd.io/_uploads/B1QpUfvN9.png) | | **Key** | | ------- | | ![](https://hackmd.io/_uploads/S1-x39hQc.png) | ### 1. Button Text - **Required:** Must be included - **Type Style:** Primary Button for the standard size button, Nav Button 1 for the limited use smaller size button - **Color:** Default color depends on [Button Style](#Button-Style) chosen, regardless of the [Button Style](#Button-Style) chosen the color is changeable within the site color palette - Default colors for each [Button Style](#Button-Style): - Primary: NEUTRAL_0 (Solid White) - Secondary: NEUTRAL_0 (Solid White) - Tertiary: PRIMARY_01 (Brand Primary) See the [Button Style](#Button-Style) section of this documentation further down the page for more information on choosing the style for the button. ### 2. Button Color - **Required:** Must be included - **Color:** Default color depends on [Button Style](#Button-Style) chosen, regardless of the [Button Style](#Button-Style) chosen the color is changeable within the site color palette - Default colors for each [Button Style](#Button-Style): - Primary: GRADIENT_PRIMARY_01 (Gradient Brand Primary) - Secondary: GRADIENT_PRIMARY_04 (Gradient Brand Quaternary) - Tertiary: PRIMARY_01 (Brand Primary) See the [Button Style](#Button-Style) section of this documentation further down the page for more information on choosing the style for the button. ### 3. Button Link - **Required:** Must be included - **Click Action:** Can be either a standard page link or it can open a [Modal](/s5OON5dpRtasL9tTj8BPOw) - **Page Link:** When linking to a URL, the button acts as any other standard link with the same configuration options - **URL:** Can link to an internal or external URL - **Window:** By default links will open in the same window/tab of the user's browser, but can be set to open in a new window/tab - **Modal:** When set to open a [Modal](/s5OON5dpRtasL9tTj8BPOw), you must configure a [Modal](/s5OON5dpRtasL9tTj8BPOw) component and set the button to open that modal; see the [Modal](/s5OON5dpRtasL9tTj8BPOw) page of this documentation for more information on creating a [Modal](/s5OON5dpRtasL9tTj8BPOw) ## Additional Configurations ### Button Style There are three available styles for CTA Buttons. Each style has the same configuration options available and only changes the visual appearance. For example, the Primary and Secondary styles of buttons have a solid background color, while the Tertiary style instead applies the background color to a more narrow outline rather than the entire background of the button. - **Button Style:** Default Primary, can be Secondary or Tertiary Below is an example of each button style. | **Primary (Default)** | **Secondary** | **Tertiary** | | -------- | -------- | -------- | | ![](https://hackmd.io/_uploads/BkcbDGD4q.png) | ![](https://hackmd.io/_uploads/BkeGvzP49.png) | ![](https://hackmd.io/_uploads/BJHGDzwV5.png) | ## Resources ### CMS Instructions #### CTA Buttons Configuration While adding or editing content blocks, site administrators and content editors can add one or more **CTA (call-to-action) buttons** or **CTA modals** to a context block based on the individual requirements of each context block that uses these buttons. **Step 1:** Scroll to the **CTA Buttons** section of the **Configure block** window, specify the button type from drop-down (either CTA button or CTA Modal), and click **Add new CTA button**. You can see a number of allowed CTA buttons for the current content block. ![CTA Button](https://hackmd.io/_uploads/r14u-HVE5.png) You can see a number of allowed CTA buttons for the current content block. **Step 2:** If you selected CTA button, displayed is the section with the CTA button properties: ![CTA Button](https://hackmd.io/_uploads/Bk05zH44c.png) Mandatory entries include: - **Block Description** - a brief description of your block - **Title** - the title of the block as shown to the user. - **Display title** - checkbox - **Button link** - **URL** - Start typing the title of a piece of content to select it. You can also enter an internal path such as */node/add* or an external URL such as http://example.com. Enter *\<front\>* to link to the front page. Enter *\<nolink\>* to display link text only. Enter *\<button\>* to display keyboard-accessible link text only. - **Attributes** - Target: open in New Window or Same Window (default). - **Button style** - primary (default), secondary or tertiary - **Button size** - large (default) of xsmall Optional entries include: - **Button link** - Link text - **Button color** - **Text color** **Step 3:** If you selected CTA modal, displayed is the section with the CTA modal properties: ![CTA Modal](https://hackmd.io/_uploads/Hk88Yomv9.png) Mandatory entries include: - **Block Description** - a brief description of your block - **Title** - the title of the block as shown to the user. - **Modal ID** - text - **Button style** - primary (default), secondary or tertiary - **Button size** - large (default) of xsmall Optional entries include: - **Button color** - **Text color** **Step 4:** Fill in the fields as required. For example, for CTA button: - **Block Description** - "CTA button" - **Title** - "CTA Button" - **Display title** - check - **Button link** - **URL** - "www.novartis.com" **Step 5:** Click **Create CTA button** to add the button to your content block. ![Create CTA Button](https://hackmd.io/_uploads/S17quHVEq.png) Add additional CTA buttons or modals if required. After you save the content block, it will contain the CTA button(s). #### CTA and Modal Buttons in Free Form The [Free Form](/KwlkT8WFQMaH5rBkfhipPQ#CMS-Instructions) content block allows adding CTA and modal buttons into the **Body** field. **Step 1:** While adding or editing a free form content block, scroll to the **Body** field and click **Buttons**. ![Free Form Body](https://hackmd.io/_uploads/BkgXdYcUq.png) **Step 2:** Displayed is the section with the CTA button properties: ![CTA Button](https://hackmd.io/_uploads/Hkb0_FqI9.png) Mandatory entries include: - **Text** - button text - **URL** - Start typing the title of a piece of content to select it. You can also enter an internal path such as */node/add* or an external URL such as http://example.com. Enter *\<front\>* to link to the front page. Enter *\<nolink\>* to display link text only. Enter *\<button\>* to display keyboard-accessible link text only. - Target: open in New Window or Same Window (default). - **Button style** - primary (default), secondary or tertiary - **Button size** - large (default) of xsmall Optional entries include: - **Button color** - **Text color** **Step 3:** Fill in the fields: - **Text** - "button" - **URL** - "www.novartis.com" **Step 4:** Click **OK** to add the button to your content block. **Step 5:** In the **Body** field, click **Modal buttons**. ![Free Form Body](https://hackmd.io/_uploads/Hy_qdK9Lq.png) **Step 6:** Displayed is the section with the modal button properties: ![Modal Button](https://hackmd.io/_uploads/HyckctqI5.png) Mandatory entries include: - **Text** - button text - **Modal ID** - text - **Button style** - primary (default), secondary or tertiary - **Button size** - large (default) of xsmall Optional entries include: - **Button color** - **Text color** **Step 7:** Fill in the fields: - **Text** - "button" - **Modal id** **Step 8:** Click **OK** to add the button to your content block. Add additional modal buttons if required. After you save the content block, it will contain the added button(s).