Prefix vs suffix icon button #3603
-
|
@serifluous During crit you had said that the icon (for the button below) should be a prefix - curious what the general rule is for using an icon in prefix vs suffix (couldn't find it on the Paste website.) I know that with arrows and anchor links, it would still be in the suffix. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary. In general, when placing an icon in a button, all button icons should be placed to the left of the text, serving as a prefix. This is to indicate important actions such as, "+ Create new". However, there is an exception to this rule. When you are moving the user forward (like in a multi-step modal, or when paginating through something), you should use a "Forward >" (ChevronRightIcon) button. In this case, the icon serves as a suffix. It's important to note that arrow icons are reserved for anchors and should not be used in buttons. Here's the relevant section from the documentation: ### Primary button
Use only one per page; this is the most important action a user needs to take. Optionally, you can add an icon to the left of the text to indicate important actions such as, "**+ Create new**".
If you decide to place an icon in a button, all button icons should be placed to the left. The only exception to this guidance is when you are moving the user forward (like in a multi-step modal, or when paginating through something). Only then should you use a "**Forward >**" (ChevronRightIcon) button. Don't use an arrow icon, since those are reserved for anchors.I hope this helps! Let me know if you have any other questions. I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:
|
Beta Was this translation helpful? Give feedback.
-
|
^ What PasteBot said. There are some notes about it on the Button page: https://paste.twilio.design/components/button#composition-notes and Button vs. Anchor page: https://paste.twilio.design/patterns/button-vs-anchor#primary-button The main reason is the icon should be there to help with scanning, so it makes the most sense on the left-hand side for LTR languages. The right arrow is the exception just because it's already a universally familiar pattern to show it on the right. |
Beta Was this translation helpful? Give feedback.
Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.
In general, when placing an icon in a button, all button icons should be placed to the left of the text, serving as a prefix. This is to indicate important actions such as, "+ Create new".
However, there is an exception to this rule. When you are moving the user forward (like in a multi-step modal, or when paginating through something), you should use a "Forward >" (ChevronRightIcon) button. In this case, the icon serves as a suffix.
It's important to note that arrow icons are reserved for anchors and should not be used in buttons.
H…