Button: Fix text and icon alignment

international-labour-organization / designsystem

A design system for the International Labour Organization

Apache License 2.0

1 stars 3 forks source link

Button: Fix text and icon alignment #1049

Open inesdgomes opened 3 weeks ago

inesdgomes commented 3 weeks ago

Hi @beatrizmartinmartins Could you please review how the button component has been implemented? https://ilo-ui-twig.netlify.app/?path=/docs/components-user-interface-button--button

It doesn't seem that padding and text/icon position is correct when compared to the designs: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?node-id=9-5&t=aNoNHhvVvYNKs9TX-0

Could you please list here exactly what needs to be changed by the developers?

beatrizmartinmartins commented 2 weeks ago

@inesdgomes basically the label needs to be inserted within a container that has a 4px top padding. This way the icon and the label look centered. Check the image attached:

inesdgomes commented 2 weeks ago

@justintemps Can we do this small fix? The text inside buttons is not vertically centered. This is visible with and without icon. See comment from Beatriz above.