Skip to main content

Call to action

A call to action is typically involved in selling or marketing a product and entices users to perform an action around a product. For example, it may call the user to purchase a product, download an app, or learn more. Call to action uses the brand accent color as a background on default and alt themes. For contrast and accessibility, on light images the background is black, and on dark images the background is white.


Call to action on a default theme

Best practices

Interacting with a call to action typically navigates a user to a targeted page where they can take action on the item. For example, clicking on a BUY NOW call to action for a Microsoft device will take them to a product detail page where they can configure or purchase the device. Typically, it is found in heroes, features and placements. It might also be found in marketing popups. Call to action text should be as concise and focused as possible, relying on the content around it to communicate the details and context of the action.


  • Use a call to action to urge a user to take action on what the page is converying or promoting.
  • Use in a focused, concise layout, usually in a hero, feature or product placement.
  • A maximum of two call to actions may be used together.
  • Use ALL CAPS except in localized markets where ALL CAPS would give a different meaning than as intended.
  • Use a unique text string for accessibility, to assist voice navigation.


  • Don't confuse users by placing call to action and a button together.
  • Don’t use a call to action in the middle of a work flow in order to trigger an inline experience. Consider using an action trigger instead.
  • Don’t use a call to action to complete a work flow. Consider using a button instead.
  • Avoid needlessly long text strings. The label should be as concise as possible.


Action trigger


  • Aria label : Add an optional aria-label with more verbose call to action text to provide users leveraging assistive technologies more clarity on the action being performed.


  • Secondary : Add f-secondary class to the anchor element for less emphasis.
  • Lightweight : Add f-lightweight class to the anchor element to use the lightweight option. When presenting users with multiple actions paired together, it is recommended to have one clear primary action with the primary styling. The other action takes on a secondary, or lightweight style to keep a clear hierarchy of the available actions. For single actions, lightweight is best used when there are several to many actions with equal prominence available on the page, and when its priority is lower than its surrounding elements.


  • Schema definition: The call-to-action schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default call to action

<a href="#" class="c-call-to-action c-glyph">
    <span>CALL TO ACTION</span>

Default call to action with aria-label

<a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
    <span>CALL TO ACTION</span>

Default disabled call to action

<a href="#" class="c-call-to-action c-glyph" aria-disabled="true" tabindex="-1">
    <span>CALL TO ACTION</span>

Secondary call to action

<a href="#" class="c-call-to-action c-glyph f-secondary">
    <span>CALL TO ACTION</span>

Secondary disabled call to action

<a href="#" class="c-call-to-action c-glyph f-secondary" aria-disabled="true" tabindex="-1">
    <span>CALL TO ACTION</span>

lightweight call to action

<a href="#" class="c-call-to-action c-glyph f-lightweight">
    <span>CALL TO ACTION</span>

lightweight call to action disabled

<a href="#" class="c-call-to-action c-glyph f-lightweight" aria-disabled="true" tabindex="-1">
    <span>CALL TO ACTION</span>