Button
The button is sized and styled to be the most prominent type of call to action. It should be used to help the guest quickly and easily understand how to progress forward with their task.
Props
Label
Text for the button. Recommended: 1-2 words.
No label (icon button)
Used where space is limited and when the action is easily recognizable by the icon alone.
Icon and position
Define micro-glyph and what side the icon is positioned.
Size
Different sizes based on desired application.
Style
Visual treatment of button.
States
Usage
Do
- Include focus states for keyboard navigation
Don't
- Use disabled buttons as they can cause confusion with users
- Don't overuse buttons; avoid placing multiple primary buttons on the same screen
UX Writing
- Use clear, concise and action driven labels; avoid generic and repetitive labels such as "learn more"
- Text labels should be not wrap into multiple lines
