Demoing those CTAs
Primary
Default
Hover/Touchstart
Selected
Pressed(Scale 95%)
Focus
Inactive
Loading (TBD)
Error (TBD)
<button class="button button--primary">Add To Cart</button>
Primary Inverse
Default
Hover/Touchstart
Selected
Pressed(Scale 95%)
Focus
Inactive
Loading
Error
<button class="button button--primary-inverse">Shop Now</button>
Secondary
Default
Hover/Touchstart
Pressed(Scale 95%)
Focus
Inactive
Loading (TBD)
<button class="button button--secondary">Shop Now</button>
Secondary Inverse
Default
Hover/Touchstart
Pressed(Scale 95%)
Focus
Inactive
Loading
<button class="button button--secondary-inverse">Shop Now</button>
Tertiary A
Default
Hover/Touchstart
Active/In Stock
Focus
Inactive
Default/OOS
Hover/OOS
Active/OOS
Loading (TBD)
<button class="button button--tertiary-a">Shop Now</button>
Tertiary A Inverse
Default
Hover/Touchstart
Active/In Stock
Focus
Inactive
Default/OOS
Hover/OOS
Active/OOS
Loading (TBD)
<button class="button button--tertiary-a-inverse">Shop Now</button>
Tertiary B
Default
Hover/Touchstart
Focus
Inactive
Loading (TBD)
<button class="button button--tertiary-b">Shop Now</button>
Tertiary B Inverse
Default
Hover/Touchstart
Focus
Inactive
Loading
<button class="button button--tertiary-b-inverse">Shop Now</button>
Text Link
<p class="link">Learn More</p>
Bold Link
<p class="link link--bold">Learn More</p>
Underline Link
<p class="link link--underline">Learn More</p>
Inline Text Link
Default
View our privacy policy and let us know
Hover/Touchstart
View our privacy policy and let us know
Pressed
View our privacy policy and let us know
Focus
View our privacy policy and let us know
<p class="link link--inline">Learn More</p>
