Reference CWDS Button Style Guide

CWDS Button Style Guide

Style GuideEvergreenPublic

AEM

CwdsButtonDesign SystemStyle Guide

Figma: CWDS Buttons | Zeroheight: Buttons

Primary

Primary — Large (default)

Breakpoint	Padding	Font-size	Line-height
Mobile	0.5rem 1rem	0.875rem	1rem
601px+	0.75rem 1rem	1rem	1.25rem
985px+	1rem 1.5rem	1rem	1.25rem

AEM HTML

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

Nuxt

<CwdsButton as="button" variant="primary">Primary Button</CwdsButton>

Primary — Medium

Breakpoint	Padding	Font-size	Line-height
All	0.75rem 1rem	0.875rem	1rem

AEM HTML

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

Nuxt

<CwdsButton as="button" variant="primary" size="medium">Primary Medium</CwdsButton>

Primary — Small

Breakpoint	Padding	Font-size	Line-height
All	0.625rem 1rem	0.875rem	1rem

AEM HTML

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

Nuxt

<CwdsButton as="button" variant="primary" size="small">Primary Small</CwdsButton>

Primary — Invert

AEM HTML

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

Nuxt

<CwdsButton as="button" variant="primary" invert>Primary Invert</CwdsButton>

Secondary

Secondary — Large (default)

Breakpoint	Padding	Font-size	Line-height
Mobile	0.5rem 1rem	0.875rem	1rem
601px+	0.75rem 1rem	1rem	1.25rem
985px+	1rem 1.5rem	1rem	1.25rem

AEM HTML

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

Nuxt

<CwdsButton as="button" variant="secondary">Secondary Button</CwdsButton>

Secondary — Medium

AEM HTML

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

Nuxt

<CwdsButton as="button" variant="secondary" size="medium">Secondary Medium</CwdsButton>

Secondary — Small

AEM HTML

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

Nuxt

<CwdsButton as="button" variant="secondary" size="small">Secondary Small</CwdsButton>

Secondary — Invert

AEM HTML

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

Nuxt

<CwdsButton as="button" variant="secondary" invert>Secondary Invert</CwdsButton>

Tertiary

Tertiary — Large (default)

Tertiary buttons have padding: 0 — they do not respond to responsive breakpoints.

AEM HTML

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

Nuxt

<CwdsButton as="button" variant="tertiary">Tertiary Button</CwdsButton>

Tertiary — Small

AEM HTML

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

Nuxt

<CwdsButton as="button" variant="tertiary" size="small">Tertiary Small</CwdsButton>

Tertiary — Invert

AEM HTML

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

Nuxt

<CwdsButton as="button" variant="tertiary" invert>Tertiary Invert</CwdsButton>

Icon Only

Pill-shaped buttons with border-radius 62.4375rem and square padding.

AEM HTML

<div class="ads__button">
  <button class="abbv-button-primary icon-only i-a">
    <span>Add</span>
  </button>
</div>

Nuxt

<CwdsButton as="button" variant="primary" icon-only>
  <template #icon-before>
    <span class="i-tabler-plus" />
  </template>
  Add
</CwdsButton>

Link Buttons

Use as="a" with href to render navigation links styled as buttons.

Go to Page

Learn More

AEM HTML

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

Nuxt

<CwdsButton as="a" href="/page" variant="primary">Go to Page</CwdsButton>

Interactive States (AEM mode)

These states come from the production AEM stylesheet and are active in AEM mode:

State	Primary	Secondary	Tertiary
Default	Blue bg, white text	White bg, blue text/border	Blue text, no border
Hover	Darker blue (#0956c0)	Blue bg, white text	Darker blue, underline
Focus	2px blue outline, 2px offset	Same	Same
Disabled	Grey bg (#b5b5b5)	Grey border, transparent bg	Grey text

Design Tokens

All button styles reference --cwds-btn-* custom properties defined in app/assets/css/cwds/tokens.css. See the CWDS index for the full token architecture.