Skip to main content
U.S. flag

An official website of the United States government

Dot gov

Official websites use .gov
A .gov website belongs to an official government organization in the United States.


Secure .gov websites use HTTPS
A lock ( Https ) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.

User Experience

Create a simple and consistent experience for your users

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

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

Requirements for all buttons

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

  • 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 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 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. logos

dark blue logo dark blue logo

Global sign in button

When using 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.

An example agency website header with the button "Sign in with" at top right
  • DO: Place a sign-in button at the top right of website headers.

An example agency website header with two buttons labeled "Menu options" and "Sign in" at top right"
  • DO: Use your own site’s global navigation styling if “Sign in” appears within a list of menu options in the header.

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, especially to present multiple sign-in options.

An example agency website page with the heading "Sign in" and three full width buttons labeled "Sign in with" and "Sign in with [alternate provider]"
  • DO: Design sign-in options that are equal in size. Stacked, solid-colored buttons work best because the stacking supports responsive layouts and mobile views.

  • Do use’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” 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.

An example agency website header with the button "Sign out" at top right
An example agency website header with two buttons labeled "Menu options" and "Sign out" at top right
  • DO: The Sign-out button style should match the Sign-in button.

Next step: Help text guidance

Edit this page
Return to top