Update - button component

[zenorocha]

@vitorfernandes commented on Thu Jun 07 2018

Design update here.

Changelog

2.0.0

• Buttons are now divided into 7 categories of parameters: styles, states, properties, colors, content, group, and skeleton;
• Regarding the styles, it has primary for primary actions, outline for secondary actions, ghost for subdued actions, destructive for serious actions, and float for actions that require overlaying other elements;
• Regarding the states, it has default for no user interaction, hover when a pointer is lying over the component, focused when the component is ready to receive input from an input device, active when a user presses the component with an input device, such a mouse click or keyboard press, selected when the component has been picked as an option, and disabled when the component isn’t available for interaction;
• Regarding the properties, it has size for matching different visual scales, weight for providing different emphasis types, rounded for creating alternative patterns, and fitting for adopting the component to the layout;
• Regarding the colors, black, green, blue-light, blue, violet, red, orange, yellow are part of Wedeploy’s palette, although any additional option is accepted when it’s needed matching another brand identity;
• Regarding the content, lone icon always has equal width and height and it’s mostly used for CTA, Icon with label are for providing more emphasis to a specific action. Icons can be placed on the right or on the left, centered or justified;
• Regarding the group, default can be used for building a stack of related actions, it’s possible set their quantity and the space between them, segmented can be used for toggle interactions, segmented with lone icon can be used for creating a distinction from the main action to other ones;
• Regarding skeleton, this is mainly used when the content is being loaded;