Our Button Styles and Usage
Buttons are clickable items that give the user the ability to take action. Some basic examples of these include, saving, deleting, signing in, submitting forms and confirming dialogs.
|
Default (Blue) |
This our default button style because it also is the color of our links, which re-enforces that they are a clickable element |
|
Primary (Green) |
Our Beeline Green buttons have historically been our primary button. The rule is, there may only be one primary button on a screen at any given time. |
|
Danger (Red) |
The danger button is used to indicate a destructive action such as deleting a profile or removing an asset. |
|
Neutral (Ghost) |
Secondary buttons are used when a screen requires many clickable elements that are in supporting roles. An example of this would be a large table with multiple actions. They are used to minimize distraction from the content they are supporting. They are also used in dialogs and a few other patterns where a second button is placed in close proximity to a primary or danger button. |
Historically, Beeline heavily used their primary brand color in their digital products. This color is a bright green known around the office as "Beeline Green" and has a hexadecimal code of #77b800. This resulted in green everywhere in our products. From labels to headers to links to buttons, the Beeline Green was saturating all UI elements. From a design perspective this devalued the Beeline Green's purpose and created a situation where text, and actions weren't 100% clear. Furthermore, this particular color of green isn't great for accessibility. It reduces legibility at smaller sizes which is a challenge for users who are visual impairments and it fails WCAG AA contrast tests. Therefore, we removed it from our UI color palette for any elements that are not decoration. We also adopted a darker shade of green for our primary button color.
There can be only 1 primary action on the screen at any given time. The primary action should represent the user's main choice and final decision. Links cannot be a primary action, only buttons. Visually, the primary action will be represented by the primary button UI element.
Button labels should tell the user exactly what will happen if clicked so use verbs that describe the action clearly. Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) and no more than four words for button labels.
Examples of labels include, Save, Delete, Update, Add Service, Edit Data, Remove User
We encourage using icons when applicable. Icons add additional visual context to the action, which helps re-enforce the messaging for the user.
| Button Name | Text & Icon Color | Background Color | Border Color | On Hover Background Color | On Hover Border Color |
|---|---|---|---|---|---|
Button NameDefault |
Text & Icon Color#ffffff |
Background Color#0573E1 |
Border Color#0573E1 |
On Hover Background Color#0352A0 |
On Hover Border Color#0352A0 |
Button NamePrimary |
Text & Icon Color#ffffff |
Background Color#448500 |
Border Color#448500 |
On Hover Background Color#376c00 |
On Hover Border Color#376c00 |
Button NameDanger |
Text & Icon Color#ffffff |
Background Color#be3a34 |
Border Color#be3a34 |
On Hover Background Color#aa342f |
On Hover Border Color#aa342f |
Button NameNeutral |
Text & Icon Color#0573E1 |
Background Colornone |
Border Color#0573E1 |
On Hover Background Color#0352A0 |
On Hover Border Color#0352A0 |
| Font Weight | Border Radius | Box Shadow | On Hover Box Shadow | Transition |
|---|---|---|---|---|
Font Weightbold |
Border Radius250px |
Box Shadownone |
On Hover Box Shadowbox-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4) |
Transitionall .3s ease |
For disabled buttons we want to make clear that the button cannot be interacted with. To do this we set the background color to gray, remove the box shadow and disable all button states, including :hover, :active, and :focus
| Background Color | Box Shadow |
|---|---|
Background Color#bdbdbd |
Box Shadownone |
Our genera rule of thumb for button width is, all buttons should be fluid and the text inside the button should dictate it's width. However, there may be times when our designs will showcase a full width, or equal spacing pattern. Our UX team will provide direction when this is the case and the reasoning for this approach. If you ever have questions about a button design, please reach out to the UX team for clarification.
| Size | Font Size | Padding |
|---|---|---|
SizeLarge |
Font Size1.3em |
Padding15px 30px |
SizeMedium |
Font Size1em |
Padding10px 20px |
SizeSmall |
Font Size1em |
Padding5px 15px |