Button component

[Sabrinavigil]

Duplicates ❌

• [X] I have searched the existing issues

Which Figma library is concerned?

Not related to one Figma library

Summary 💡

Improve button with properties and tokens. Add a "is loading" variation. Rework paddings on “with icon” variant (make it pixel, perfect). Add missing reversed variation.

Examples 🌈

https://www.figma.com/community/file/1117085093344345579 https://www.figma.com/community/file/1115858697474114875 https://www.figma.com/community/file/1111717810979847533

Motivation 🔦

No response

New 🆕

• [ ] Validated in a grooming session

Backlog 📋

• [ ] Has a good summary
• [ ] Has example link(s)

Design in progress 🏗

• [ ] Analysis (functional & technical)
• [ ] Design refinement
• [ ] Dev qualification (properties, breakpoints, tokens etc.)
• [ ] Documentation refinement (inside the Figma branch)

Design review 👀

• [ ] Figma branch merged
• [ ] Documentation review _(and move the documentation into Vitamin Documentation Figma file)

Ready to dev 👍

• [ ] Issues are created in all repositories affected (vitamin-<web,android,ios,compose>)

Dev in progress 💻

• [ ] All issues are resolved (to replace with issues links)

[MARIEDELATTRE]

• mabye copy/copied variant ? @Sabrinavigil

[MARIEDELATTRE]

DONE:

• Component properties added.
• Emoji in layers names.

TODO:

• Doc in files (with plugin prop stars cf Vitamin - Improvements V0 & V1).
• Add icon button component (not a variant, it's component itself).
• Add a "is loading" variation.
• Rework paddings on “with icon” variant (make it pixel, perfect) > impossible
• Add missing reversed variation.

[Sabrinavigil]

DONE:

• Component properties added.
• Emoji in layers names.

TODO:

• Doc in files (with plugin prop stars cf Vitamin - Improvements V0 & V1).
• Add icon button component (not a variant, it's component itself).
• Add a "is loading" variation.
• Rework paddings on “with icon” variant (make it pixel, perfect).
• Add missing reversed variation.

[Sabrinavigil]

Add a circular variation :

[Sabrinavigil]

Add a critical button : Thanks @Tlahey :)

[Sabrinavigil]

An other use case of the circular button from @LoicVeira

[lauthieb]

This topic has been launched. However, its status in the board no longer reflects the current reality, so it has been moved to our "New" column. We will wait for design tokens before. We will keep you informed of the different advances. Thank you.

[lauthieb]

Hello, As @Z08MURBE proposed, we will also need to take care about adding a loading state for the button that could be useful. Cf. this issue: https://github.com/Decathlon/vitamin-design/issues/186 Thank you again @Z08MURBE for your proposition. Laurent