Buttons are categorized by style – primary, standard, and flat. Primary buttons are blue with white button text, and standard buttons are transparent with dark gray text and border color. Flat buttons draw less focus and are simpler, making them useful for placing inside container elements like cards or in layouts with repeating actions.
Anchor and input buttons
To style an anchor (a) tag as a button use the button class. To style an input as a button use the .button class and define a label by adding a value attribute.
Adding an icon to a button can add clarity and draw focus to specific actions. They’re also useful for responsive design where labels can be removed to make better use of space on smaller devices. Icons can be added to buttons by wrapping an svg and text in a .button__inner div inside the button element.
Icon Only Buttons
Buttons can contain no text and only an icon. Make sure to include a tooltip to clarify the function of the icon to remove any ambiguity.
Buttons can be given states outside of the standard hover, active and focus states. It’s important to communicate to the user that a button is disabled, or that it is unclickable because something is loading.
If a button loads something and and should remain unclickable while loading, a spinner should be used to show that something is happening (rather than simply disabling the button).
Add disabled to a button to visually fade it to 20% opacity and appear inactive. Only disable a button if it’s clear to the user why it is disabled. In most cases it’s better to allow the user to click a button and be given inline feedback to highlight what they need to do in order to continue.