Normal — communicates that component is interactive and enabled.

Focus — communicates that the user has highlighted an element, using a keyboard or other input method.

Hover — communicates when a user has placed a cursor above an interactive element.

Active — or pressed state communicates that the user had tapped on the button.

Progress/Loading —used when action is not performed immediately and communicates that the component is in the progress of completing the action.

Disabled — communicates that component is currently noninteractive, but can be enabled in the future.

Buttons come in various colors, shapes, and sizes.

Most common are rectangular buttons with rounded corners, that are easily identifiable and look good next to the input field. Choosing the right style for the button will depend on the purpose, platform, and guidelines. Here are some of the most popular style variations: