GCDS: Button

[samsadasivan]

Audit:

• Button uses icons (remove for now - they may have a set of icons for us to choose from in the future)
• Typography and padding don't match

DESKTOP

• Forms: Font Size = 20px, Line Height = 28px (140%), Padding = 8px 20px
• GCDS: Font Size = 20px, Line Height = 24px (120%), Padding = 12px

*GCDS coded button is not aligned with our mobile button sizing in figma and fonts + padding do not scale down like the Forms buttons

MOBILE

• Forms: Font Size = 20px, Line Height = 28px (140%), Padding = 8px 20px

• GCDS: Font Size = 20px, Line Height = 24px (120%), Padding = 12px

• Button does not expand to 100% screen width on mobile

Current state

Desired state

[timarney]

PR:

• Updated Padding
• Fixed active state to use black background
• Updated secondary button to use blue vs bg-gray-600
• Added transition all - outline now fades in when focused etc...

Forms

https://github.com/user-attachments/assets/0a5817e8-4da8-4e60-8ea1-f181d214a6b2

GCDS

https://github.com/user-attachments/assets/9a34b695-8b38-4456-9b87-b299b029ade4

https://github.com/cds-snc/platform-forms-client/pull/4319

[timarney]

Noting the same button component is used on non front facing forms --- so possibly might need to make adjustments as we find them inside the builder.

i.e. add element ---- in this case the active state matches the black bkd now https://github.com/user-attachments/assets/8da861f0-1a76-4b1a-901e-b95c0632d81e

[timarney]

so possibly might need to make adjustments as we find them inside the builder.

For example the Accounts "filters"

[timarney]

https://github.com/user-attachments/assets/a9edcfa6-2a67-4cfb-a386-fd521de73000