Components<\/p>\n
When considering where to place a button, contemplate the order in which a user will flow through the UI. For example, a user\u00a0 will need to read and interact with a form’s text fields before submitting the form. Therefore, in mose cases, the submit button should be placed at the bottom of the UI container.<\/p>\n
While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.<\/p>\n
Primary<\/strong><\/p>\n Secondary<\/strong><\/p>\n Danger<\/strong><\/p>\n Text<\/strong><\/p>\n Button with Icon<\/strong><\/p>\n Like<\/strong><\/p>\n Disabled<\/strong><\/p>\n For the principle call to action on the page.<\/p>\n For secondary actions on each page.\u00a0<\/p>\n When an action has harmful intentions to the user’s data (delete, remove, etc.)<\/p>\n When an action does not require primary dominance on the page.<\/p>\n Icons can be used in buttons to better communicate what the button does. Icons are always paired with text. There are three variants ; left icon, right icon, stacked icon<\/p>\n Heart shaped button with SVG animation. Used for favoriting an account<\/p>\n Use when a user cannot proceed until an input is collected<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n\n\t\tBest Practices
\n\t<\/h2>\n\n\t\t
\n\t\tDo
\n\t\t<\/a>
\n\t<\/h4>\n\n
\n
\n
\n
\n
\n
\n