Sign In


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.

Buttons vs Links

Buttons and links are both clickable HTML elements but their markup is fundamentally different. Because of this, they are often used incorrectly, and using the wrong element could negatively effect accessibility. Whereas buttons provide user’s with a clickable action, links provide the user with a way to navigate to a new page. The general rule of thumb is if clicking an element results in a new URL or a new perceived view then use a link. For everything else, use a button.

Buttons, Colors, and Naming


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 descructive action such as deleting a profile or removing an asset.

Neutral (White)

Netural 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.

The Only One Primary Action Rule

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 reduces legibility at smaller sizes which is a challenge for users who are visual impairments.

The Primary Action Rule

There can be only 1 primary action on the screen at any given time. The primary action should represents 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.

Blue vs. White Buttons

When adding actions to an experience we want to make sure that the colors we use to represent those actions relay their purpose.  Green being our primary action has clearly defined rules around when to use.  Blue our secondary and white our tertiary colors often get a lot of questions around usage.   Our blue button can be used as a primary action but unlike our green primary, can exist multiple times on a view.  So if you have a series of buttons and you want one of those buttons to stand out because it is the user’s most used action or final action, make it blue and leave the other’s white.  If you have a series of buttons where none of the actions need to stand out to the user, use the white buttons.  The reason for this is, by adding too many blue buttons to a view it can distract the user from the content they are trying to consume.  The white buttons are clearly actions, but allow the content to retain the main user focus.

In this modal example, the CTA to navigate to new content is presented with a primary, green button. While the more-neutral option contrasts the field with a white button.
In this modal example, both CTA buttons are presented the same, masking any intuitively-bound neutral options. Using this pattern can make it difficult for a user to distinguish positive and negative actions.
tables example
In this table example, the CTA to destroy content is presented with a red button. While the remaining, more-neutral options contrast the table-row with white buttons.
table example
In this table example for sending invitations, the CTA to initiate content is presented with a blue button. While the remaining, more-neutral options contrast the table-row with a white dropdown.

Labels and Text

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 three words for button labels.

Examples of labels include, Save, Delete, Update, Add Service, Edit Data, Remove User

Using Icons

We encourage using icons when applicable. Icons add aditional visual context to the action, which helps re-enforce the messaging for the user.

  • When choosing icons for an action, make sure the icon is visually related to the verbs used in the button text.
  • The icon color should be the same color as the text it’s supporting.

Button Styles

Button Name Text & Icon Color Background Color On Hover Background Color
Default White (#ffffff) Blue Primary (#0575e6) #0b82fa
Primary White (#ffffff) Green Primary (#77b800) #87d20
Danger White (#ffffff) Red1 (#be3a34) #cb4741
Neutral Font Primary (#4b4b4b) White (#ffffff) #fafafa
Font Weight Border Radius Box Shadow On Hover Box Shadow Transition
400 2px 0 1px 2px 0 rgba(0, 0, 0, 0.2) 0 0 20px 0 rgba(0, 0, 0, 0.4) all .3s ease
Disabled Buttons

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
#bdbdbd none


Size Font Size Padding
Large 1.286em 15px 25px
Medium 1em 10px 20px
Small 1em 6px 15px

Button Groups


Button Icons

Button Icon & Text