The React documentation for this component can be read from Storybook (link here)

CTA

Use to signify that the user needs to take an action.

Description

Can be used in any context but when pairing a primary CTA with a secondary action, use a text link for the secondary action. For disabled buttons, simply add the disabled attribute.

variations:

  • cta-secondary--inverse: For cases when the button will sit on dark backgrounds.
  • cta--block: Purpose is to create a perception that the button is related to the other elements that are grouped with it by creating a sense of continuation and symmetry. The block button does this by filling the full width of it’s container on small screens to visually align with other elements that also fill the container’s full width. A requirement for the cta block is to be wrapped in a block container.
  • cta--minor: reduces the size of the cta
  • cta-primary--process: Variation of primary button that should be used when the action of the button is not instant (e.g. waiting for the response from the server when posting a form). For the processing state to be active, the button requires the is-processing class. When the processing state is active, the text of the button will be replaced with the content of the data-process-text attribute. Works with both regular and cta--minor variation.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-cta;

Link to Abstract/Sketch file

Download Sketch / Abstract file

Subcategories

Usage

Usage example

Primary CTA

This is the default button style

Secondary CTA

Alternative CTA style with inverted colors and a transparent background

Text link

Kostenloses Anlegerkonto eröffnen Inverse

Link in context within a paragraph Apply now it's really easy!

Full Width CTA

Block buttons


Smaller CTAs




Inverse

Process CTA

Click the button to simulate a processing state (clicking functionality is NOT included in the component)



<div class=content__component-example>
  <button class="cta-primary" type="button">Primary</button>

  <a class="cta-secondary" href="#">Secondary</a>

  <a class="cta-link" href="#">Link</a>

  <button type="button" class="cta-link">Link</button>

  <a class="cta-secondary href="#" disabled>Secondary</a>

  <button class="cta-secondary--reverse" type="button">Secondary</button>

  <a class="cta-primary cta--full-width" href="#">Full Width</a>

  <div>
    <button class="cta-primary cta--block">Primary block</button>
  </div>

  <div>
    <button class="cta-secondary cta--block">Secondary block</button>
  </div>

  <button class="cta-primary cta-primary--proces" data-process-text="Processing" type="button">
    <svg class="svg-icon cta-primary__icon">
      <use xlink:href="/m2dm-public/assets/icons/svg-sprite.svg#processing"></use>
    </svg>

    <span>Process<span>
  </button>

  <button class="cta-primary cta--minor cta-primary--process" data-process-text="Processing" type="button">
    <svg class="svg-icon cta-primary__icon">
      <use xlink:href="/m2dm-public/assets/icons/svg-sprite.svg#processing"></use>
    </svg>

    <span>Process<span>
  </button>
</div>