[GitHub] [superset] Steejay opened a new issue #13535: Adding button design guidelines

[GitBox <gi...@apache.org>]

Steejay opened a new issue #13535:
URL: https://github.com/apache/superset/issues/13535


   Adding these button design guidelines to the Superset wiki. The goal of these guidelines are to provide some best practices when designing with buttons. This will accompany the existing Capitalization guidelines.
   
   ### Overview
   
   **Button variants:**
   1. Primary
   2. Secondary
   3. Tertiary
   4. Destructive
   
   **Button styles:**
   Each button variant has three styles:
    1. Text
    2. Icon+text
    3. Icon only
   
   Primary buttons have a fourth style
   4. dropdown.
   
   **Usage**
   Buttons communicate actions that users can take. Do not use for navigations, instead use links.
   
   **Purpose**
   1. Primary - Main call to action, just 1 per page not including modals or main headers
   2. Secondary - Secondary actions, always in conjunction with a primary
   3. Tertiary - For less prominent actions; tertiary buttons can be used in isolation 
or paired with a primary button when there are multiple calls to action.
   4. Destructive - For actions that could have destructive effects on the user’s data 
(for example, delete or remove)
   
   
   ### Format
   
   **Anatomy**
   The button text is always centered. By default Superset uses the Label style for all button labels. If a text label is not used, an icon should be present to signify what the button does.
   In a button that uses an icon and text, position the icon to the left of the text.
   
   **Button size**
   • The default button size is 160/32 (width/height). 
   • The button width can get smaller if the space it needs to occupy is less than the default size. The minimum padding in this case is 8px around the text.
   • The text is 11px, Inter, Medium and all caps
   • The corners have a rounded radii of 4px 
   • Ideally try to use the default button size for all use cases unless the parent container is less than the default button width.
   
   **Button groups** 
   Group buttons that have a relationship. Too many calls to action will overwhelm and confuse users so they should be avoided. Even secondary buttons can have too much visual weight. It is recommended to use tertiary or ghost buttons in layouts with more than three calls to action.
   
   All buttons in a button group should try to use the same style. There may be cases where a combination of styles are used in the same button group as long as all actions are clear to users.
   
   **Order**
   You don’t necessarily need to use the buttons in the order that their labels imply. For example, you don’t always need to use the secondary button as the second button in your layout. The most important thing is to establish a visual hierarchy between the buttons in your UI. Keep these best practices in mind.
   
   **Spacing**
   In a button group, buttons should be spaced 8px away from each other vertically or horizontally.
   
   
   ### Content
   
   **Text labels**
   Button labels need to be clear and predictable. Button labels should clearly indicate the action of the button. To provide enough context, use the {verb} + {noun} format except in the case of common actions like “Done”, “Close”, “Cancel”, “Add”, or “Delete”.
   
   There are exceptions to this rule for situations in which button length could cause problems in compact UIs or negatively impact translation, but the {verb} + {noun} formula is still best practice.
   
   Some images/examples will accompany the copy in the wiki
   ![Button design guidelines](https://user-images.githubusercontent.com/60786102/110520061-dc1f9480-80c2-11eb-910c-2722f55912db.jpg)
   
   
   cc @rusackas @mihir174 
   
    


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

[GitHub] [superset] junlincc closed issue #13535: [Design]Adding button design guidelines

[GitBox <gi...@apache.org>]

junlincc closed issue #13535:
URL: https://github.com/apache/superset/issues/13535


   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org