DSCatalyst design system
TenantRexall
Design system/Components/Button
atom ยท normalize candidate

Button

Shared click target for CTAs, utility actions, menu buttons, and generated variants.

9consumers2evidence10tokens
Rendered primitiveButton variants and statesdeterministic source context state extraction
Brand 0 utility buttonKeep as evidence; decide whether prop variants cover it before creating a new component.
source observed
Source restbutton.legacy-button-3.source-restsource observed
Hover targetbutton.legacy-button-3.hoverrequired derived
Pressedbutton.legacy-button-3.pressedrequired derived
Keyboard focusbutton.legacy-button-3.focusrequired derived
Unavailablebutton.legacy-button-3.disabledrequired derived
Brand 0 primary CTANormalize as Button intent=primary/action, with CTA copy and optional href coming from content fixtures.
source observed
Source restbutton.primary-cta-5.source-restsource observed
Hover targetbutton.primary-cta-5.hoverrequired derived
Pressedbutton.primary-cta-5.pressedrequired derived
Keyboard focusbutton.primary-cta-5.focusrequired derived
Unavailablebutton.primary-cta-5.disabledrequired derived

Semantic token resolution

Labelvar(--wl-primary-strong)primaryStrongcolorFocus ringvar(--wl-accent)Buttonatom API

Used by

Global navigation shellHeader nav buttons, utility links, shop/flyer/store affordances.directCampaign carouselSlide CTAs and generated carousel variants.directFeatured promotions gridPromotion card CTAs.inferredWeekly flyer location toolbarFlyer search/actions and viewer controls.inferredPharmacy service card gridService card appointment and learn-more actions.directPrescription promo banner pairRefill and transfer banner actions.directWellness prescriptions panelProgram enrollment and medication task CTAs.inferredBe Well app campaignProgram campaign action.directNewsletter signup formSubmit action.direct

Proposed contract

intentsizelabelhreficonexternaldisabledtrackingId

Token contract

Labelvar(--wl-primary-strong)Surfacevar(--wl-surface)Bordervar(--wl-primary-soft)Active fillvar(--wl-primary-strong)Active labelvar(--wl-surface)Text weightvar(--wl-label-weight)Radiusvar(--wl-button-radius)Horizontal paddingvar(--wl-button-padding-x)2 moresemantic slots
  • Homepage currently exposes several button-like treatments with different class names.
  • Normalize carefully: preserve Brand 0 evidence first, then converge future variants through props.
Evidence2 source clusters
legacy buttonRexall.ca homepage fidelity audit
Shop (opens in a new window)Weekly Flyer
primary ctaRexall.ca homepage fidelity audit
Learn MoreBook an Appointment