Skip to main content

Hi!


I have a button that uses variables for sizes (S, M, L, XL). I want buttons S and M to use smaller font size (14px) than L and XL (16px).

I use the same font style for button and paragraph text (M-regular).


How do I set up variables for that style so that the button text changes between 14px and 16px (depending on the button size), independently from paragraph text that should switch sizes depending on the device (Desktop, Tablet, Mobile)? I want to control button size regardless of the device.


There are a couple solutions I can think of:



  • Use a separate font style for paragraph text and button text, each having a separate text variable

  • Donโ€™t use variables at all for button size, just use variants (Iโ€™m trying to avoid that one due to many variants)


Is there a way to keep a single style for buttons and paragraphs, and somehow handle this case with variables?

Be the first to reply!

Reply