User Experience

Design your application’s sign-in and sign-out buttons

The sign-in button on your application initiates authentication with Login.gov, and takes users to the initial screen on Login.gov to sign in or create an account.

Requirements for all buttons

• Do use “Sign in” or “Sign in with Login.gov” as the label for the sign-in button. This is consistent with calls-to-action across Login.gov and in our user support documentation. If most users of your application do not have Login.gov accounts, you may also use the label “Get started with Login.gov”.

• Do ensure that all buttons have default, hover, active, and focus state styling and required color contrast. The U.S. Web Design System offers code examples of button state styling and accessibility guidelines.

• Do use sans serif and neutral fonts for your sign in button.

• Don’t use the external-link icon that might suggest a link to another website and confuse users, especially those using screen readers.

• Don’t use an icon instead of a text label. Buttons may include the Login.gov logo or shield in addition to a text label; any logos or images require alt text (see button and logo styling).

Button and logo styling

• Do use one of the two button heights provided.

• Do center the label and Login.gov logo within the button. Minimum left and right padding is 1.25 rem or 20 px.

• Do provide sufficient contrast between the button and your applications’ background color. Use the dark blue button on light backgrounds and the light blue button on dark backgrounds.

• Do use the white button with an outline on light backgrounds that don’t provide sufficient contrast to use the light blue button.

Login.gov logos

Global sign in button

When using Login.gov to authenticate your users, we recommend implementing one official button using “Sign in” as the call-to-action. Users are familiar with the sign-in button placed on the top right of website headers. Placing your sign-in button in this location takes advantage of this common pattern and can be carried throughout the entire application. We also recommend placing the global sign-in button at the top on mobile devices, either within or next to the mobile menu.

After a user signs in, a sign-out button labeled “Sign out” replaces the sign-in button on the website header.

Optional: Sign-in options on a page

Some agency partners decide to implement a sign-in page on their application prior to redirecting their users to Login.gov, especially to present multiple sign-in options.

• Do use Login.gov’s preferred button style or primary button styling, since signing in is the main action and helps your users know that it is the next step in the process.

• Do use the label “Sign in with Login.gov” to differentiate from other sign-in options you may have on your application.

• Do design sign-in options that are uniform in width and height. Consistency and uniform sizes helps users easily scan information.

• Do style each button in a list with a different background color and center-justify the text in the buttons. 

• Don’t add too much text or imagery above the sign-in button that might push your users’ primary action out of view, especially on mobile devices.

Sign out

Users need a clearly marked button to sign out after a user has signed in to your application. This button replaces the Sign-in button on the interface, preferably in the same location. The Sign-out button style should match the Sign-in button.

Next step: Help text guidance

Edit this page