Button

Buttons are interactive elements used for single-step actions.

• Hover State: Clearly show that the button is interactive when it gets hovered with a mouse cursor.
• Active State: Used when a button gets pressed. The same state can be used to represent the button responsible for toggling another element on the page while that element is visibly opened.
• Focused State: Used when a button gets selected through keyboard navigation.
• Icon Support: Icons easily communicate the purpose of the button when used next to its label or can be used without text when there’s not enough space. Make sure that the accessibility label is provided when used with an icon only.
• Disabled: Visually shows that a button is not interactive and restricts it from being pressed.
• Loading: Used when users have to wait for the result of their action after they press a button. If a spinner is used to display this state make sure that it’s not changing the original button width or height.
• Full Width: By default buttons take the width of their content, but they should also come with a full width variant that works well in mobile devices.
• Variants: When using multiple buttons, there should be a way to differentiate between primary and secondary actions. Buttons may play different roles for the user or be used on different types of surfaces and they have to change the way they look.
• Sizes: Buttons can be used in different areas of the website and may have multiple predefined sizes. On mobile, tappable areas have to be a minimum of 48px to be accessible according to iOS and Android accessibility guidelines.