07.1 / Buttons

07.1 / Buttons
Primary button hierarchy Primary buttons should always be placed at the bottom right of the page, with a minimum width of 140 px and 40 px of clear space around it. This call-to-action will allow the user to proceed to the next steps in travel process. The buttons on this page represent the standard size, but in cases where the text within does not fit, allow for 20 px of clear space on either side.
Primary button states
Button examples:
Primary button styles
Hover state – CSS layer
Throughout the site, we have chosen to use the modern gold gradient as our primary action button color. This was done in order to draw more attention to the desired selection, and to guide the user through the process with more ease and clarity. If there are two actions available, the secondary button will be the light gray gradient.
Primary & secondary action – side-by-side
Primary & secondary actions – stacked
Sometimes it is necessary to give the user multiple options at a step in the path. In these cases, the preferred choice (action) should be given prominence by using the gold button and placing it on top or on the right. The secondary action (gray) should be placed on bottom or to the left.
Secondary buttons Secondary buttons should always be used as action buttons when making selections within a specific section of the page, modal or light box, when there is limited real estate. These buttons should be a minimum width of 140 px and have a maximum height of 30 px. The buttons on this page represent the standard size, but in cases where the text within does not fit, allow for 20 px of clear space on either side.
Secondary button states
Button examples:

Hover state – CSS layer
Throughout the site, we have chosen to use the modern gold gradient as our primary action button color. This was done in order to draw more attention to the desired selection, and to guide the user through the process with more ease and clarity. If there are two actions available, the secondary button will be the light gray gradient. In rare cases where there are three actions available, the Alternate Action (blue) button may be introduced.
Secondary button do’s & don’ts When there is a multiple selection scenario, it is important to be very clear on the primary and secondary actions. We should guide the user through the selection process with as much ease as possible and help them get to their desired means.
Primary & secondary action – side-by-side
Primary & secondary actions – stacked
Primary & secondary actions – side-by-side
Sometimes it is necessary to give the user multiple options at a step in the path. In these cases, the preferred choice (action) should be given prominence by using the gold button and placing it on top or on the right. The secondary action (gray) should be placed on bottom or to the left. In rare cases where there are three actions available, the Alternate Action (blue) button may be introduced.
Secondary button color fields Secondary buttons should always be used as action buttons when making selections within a specific section of the page, modal or light box. These buttons should be a minimum width of 140 px and have a maximum height of 30 px. The buttons on this page represent the standard size, but in cases where the text within does not fit, allow for 20 px of clear space on either side.
Secondary button on color field


When there is a secondary button on a light gray color gradient, the size of the button remains consistent. The color on the other hand is a specific gradient only to be used in these cases, and no where else in the site. The button will also have a 1 pixel stroke in this instance.
Ancillary buttons Ancillary buttons are the call to action used within ads and offers throughout united.com and third party vending. These buttons should be a minimum width of 200 px and have a maximum height of 22 px. The buttons on this page represent the standard size, but in cases where the text within does not fit, allow for 20 px of clear space on either side.
Call-to-action buttons
Text selections on color fields
Tile measurements
Button sizing examples
Available Assets Use the links below to access the available files for the assets referenced on this page.