Reference CWDS AEM Button — HTML Reference

CWDS AEM Button — HTML Reference

Style GuideEvergreenPublic

AEM

CwdsAEMButtonDesign System

Scoping Pattern

Button styles activate inside any ads__ scoped element or directly on an .ads__button wrapper. The CSS uses two selectors:

[class*=ads__] .abbv-button-primary — button inside any ads__ ancestor
.ads__button.abbv-button-primary — button is itself the ads__button wrapper

The standard AEM pattern wraps each button in <div class="ads__button">:

<div class="ads__button">
  <button class="abbv-button-primary">Click me</button>
</div>

Responsive Breakpoints

Buttons have 3 breakpoints (unlike typography's 2):

Breakpoint	Min-width	Padding	Font-size	Line-height
Mobile	base	0.5rem 1rem	0.875rem	1rem
Tablet	601px	0.75rem 1rem	1rem	1.25rem
Desktop	985px	1rem 1.5rem	1rem	1.25rem

Medium and small sizes use fixed padding — they do not change at breakpoints.

Primary Button

Default: blue bg (#0066f5), white text, blue border.

<div class="ads__button">
  <button class="abbv-button-primary">Primary Button</button>
</div>

Primary — Medium

<div class="ads__button">
  <button class="abbv-button-primary medium">Primary Medium</button>
</div>

Primary — Small

<div class="ads__button">
  <button class="abbv-button-primary small">Primary Small</button>
</div>

Primary — Invert

White bg, blue text. For use on dark backgrounds.

<div class="ads__button">
  <button class="abbv-button-primary invert">Primary Invert</button>
</div>

Primary — Icon Only

Pill-shaped (border-radius: 62.4375rem), square padding.

<div class="ads__button">
  <button class="abbv-button-primary icon-only i-a">
    <span>Label (visually hidden)</span>
  </button>
</div>

Secondary Button

White bg, blue text (#0066f5), blue border.

<div class="ads__button">
  <button class="abbv-button-secondary">Secondary Button</button>
</div>

Secondary — Medium

<div class="ads__button">
  <button class="abbv-button-secondary medium">Secondary Medium</button>
</div>

Secondary — Small

<div class="ads__button">
  <button class="abbv-button-secondary small">Secondary Small</button>
</div>

Secondary — Invert

Transparent bg, white text, white border.

<div class="ads__button">
  <button class="abbv-button-secondary invert">Secondary Invert</button>
</div>

Secondary — Icon Only

<div class="ads__button">
  <button class="abbv-button-secondary icon-only i-a">
    <span>Label (visually hidden)</span>
  </button>
</div>

Tertiary Button

Transparent bg, blue text, no border, padding: 0.

<div class="ads__button">
  <button class="abbv-button-tertiary">Tertiary Button</button>
</div>

Tertiary — Small

Font-size stays 0.875rem. Padding remains 0.

<div class="ads__button">
  <button class="abbv-button-tertiary small">Tertiary Small</button>
</div>

Tertiary — Invert

White text on dark background.

<div class="ads__button">
  <button class="abbv-button-tertiary invert">Tertiary Invert</button>
</div>

Tertiary — Icon Only

Padding: 0 (overridden from standard icon-only).

<div class="ads__button">
  <button class="abbv-button-tertiary icon-only i-a">
    <span>Label (visually hidden)</span>
  </button>
</div>

Link Usage (`<a>` element)

Buttons can render as <a> elements for navigation. All the same classes apply:

<div class="ads__button">
  <a href="/page" class="abbv-button-primary">Go to Page</a>
</div>

<div class="ads__button">
  <a href="/page" class="abbv-button-secondary">Learn More</a>
</div>

<div class="ads__button">
  <a href="/page" class="abbv-button-tertiary">Read More</a>
</div>

Icon Classes

AEM uses .i-a (icon before text) and .i-b (icon after text) with ::before/::after pseudo-elements driven by an icon font:

<!-- Icon before text -->
<div class="ads__button">
  <button class="abbv-button-primary i-a">
    <span>Download</span>
  </button>
</div>

<!-- Icon after text -->
<div class="ads__button">
  <button class="abbv-button-primary i-b">
    <span>Next</span>
  </button>
</div>

Icon pseudo-elements use font-size: 1.5rem (large/medium) or 1.25rem (small), position: static, margin: 0.

Interactive States (from production CSS)

These states are provided by the production AEM stylesheet and do not need to be recreated:

State	Primary	Secondary	Tertiary
Hover	bg #0956c0	bg #0066f5, text #fff	text #0956c0, underline
Focus	outline 2px solid #0066f5, offset 2px	same	same
Visited	bg #00347e	bg #00347e	transparent
Disabled	bg #b5b5b5, text #9f9f9f	border #b5b5b5, transparent bg	text #9f9f9f