Button states
We're finally ready to begin designing our components! First we'll build a button component in all of its variations and states. Then we'll build a composite component, a component comprised of other components, a modal!
Button States
There are many factors that go into building a button. We touched upon these earlier but here are the use cases we'll cover:
- Primary
- Secondary
- Tertiary
- Primary with icon
- Secondary with icon
- Tertiary with icon
- Icon button
- Disabled
- Neutral
- Hover
- Focus
- Active / pressed
- Small
- Default
- Large
- Warning
- Error
- Success
Buttons should be labeled with what they do and it should be clear what action clicking the button will trigger.
A modal asking 'Do you want to delete this document' with two buttons labeled 'Okay' and 'Cancel' might at first glance seem sufficient, but the 'Okay' label leaves something to be desired.
Instead you should label the button with 'Delete' and give it error styling.
Types Of Buttons
There are several different types of buttons and each of these conveys a hierarchy.
Primary buttons should be used for the most important action on a page (i.e. log in, submit).
Secondary buttons should be used for content which, while still important, won't trigger the highest-priority action on the page. You may want to use secondary buttons for navigating to other content on the page.
Tertiary buttons are used for miscellaneous actions; actions which are not something the user needs to do at that given second. This might be an action like 'Read more' on a blog post.
