Text buttons are never given the space they need to breathe and perform like a button. A text button is not a different colored body text. It’s a button and has stated so try to design all of these vs changing text from dark to a blue link color.
Rarely designed right and so powerful for a clean interface. Text buttons are the under dog of the button family and here is how to design them properly.
A button’s text label is the most important element on a button, as it communicates the action that will be performed when the user touches it.
Text buttons are often embedded in contained components like cards and dialogs, in order to relate themselves to the component in which they appear. Because text buttons don’t have a container, they don’t distract from nearby content.
Text buttons can be placed in front of a variety of backgrounds. Until the button is interacted with, its container isn’t visible. Thank for sharing by Zander Whitehurst
1. Identifiable
Text buttons easily get lost in your UI. They get lost amongst text or busy elements of your UI. Make them super obvious amongst your interface and style them like buttons, not colored text.
2. Discoverable
Text buttons sometimes have their own space to grab attention. But typically, they are packed amongst other buttons or components. Make sure your text buttons are easily discoverable with enough margin in a component.
3.Emphasis
Text buttons don’t have high emphasis actions attached to them. When using multiple buttons ensure the text button doesn’t look like the disabled state of another button.
4. Placement
Avoid treating the button as a different colored piece of the body. It serves a really important action and requires thought. Avoid vertical stacking of buttons if you can place them horizontally.
5. Styling
They are easy to create right? Change the color to blue and you have a text button. Experiment with capitalizing your text buttons and always layer your text button with a container and states which we’ll cover next.
6. States
Another skippable phase of designing a text button is forgetting the various states. Enabled, disabled, hover, focused, and pressed all need to be considered. Otherwise, you’ll get a dreaded blue and purple default underlines.
7. Padding
Text buttons are buttons. They, like buttons, need space to breathe and for consistency, it helps to follow the 8pt rule when creating your text buttons. I’ve blown this text button up to show you dimensions.
8. Icons
Just like contained and outlined buttons, text buttons can have icons. Similarly, follow an 8pt rule for the icon and be sure to match the color of the text with the icon to connect the elements into a single button.
