On this page
OverviewRequirementsGetting StartedDisplay Sign In with Apple ButtonCenter-Aligned ButtonsLeft-Aligned ButtonsLogo-Only ButtonsSign in with Apple Button
Overview
You can use this page to customize Sign in with Apple buttons that align with the Human Interface Guidelines and to enable Sign in with Apple on the web using Sign in with Apple JS. Each button is preconfigured with some default values, and if you want to explore further you can modify values throughout the page to customize the button to fit your sign in experience.
To let users set up accounts and sign in to your native iOS, macOS, tvOS, and watchOS apps, use the AuthenticationServices framework.
Requirements
This demo is built using Sign in with Apple JS version 1, and requires one of the following browsers: Safari, Chrome, Firefox, Edge.
Getting Started
This guide assumes you have already configured your webpage or application on other platforms for Sign in with Apple, and are familiar with Sign in with Apple best practices. Before starting your integration, we recommend reviewing Getting Started with Sign in with Apple and the Sign in with Apple Human Interface Guidelines.
Display a Sign in with Apple Button
Sign in with Apple JS provides a number of Sign in with Apple button styles, so there’s no need to create your own. Using the styles provided by Sign in with Apple JS ensures that the button will always have the most current design, and will render correctly across devices. Use the Sign in, Sign up or Continue button type on your website wherever users initiate authorization, like a shopping cart page. For additional guidance on which button style to use in various situations, see Displaying and Configuring Sign in with Apple Buttons.
Use this tool to visualize buttons of different types, styles and dimensions, localized to different languages, and view their associated HTML attributes. For information on button types and their required iOS, macOS, tvOS, and watchOS versions, see Displaying and Configuring Sign in with Apple Buttons.
Center-Aligned Buttons
<divid="appleid-signin"data-mode="center-align"data-type="sign-in"data-color="black"data-border="false"data-border-radius="15"data-width="200"data-height="32"></div>
If you’re not using the Button API, you can download a PNG.
Left-Aligned Buttons
<divid="appleid-signin"data-mode="center-align"data-type="sign-in"data-color="black"data-border="false"data-border-radius="15"data-width="200"data-height="32"data-logo-size="medium"data-logo-position="15"data-label-position="46"></div>
If you’re not using the Button API, you can download a PNG.
Logo-Only Buttons
<divid="appleid-signin"data-mode="center-align"data-color="black"data-border="false"data-border-radius="15"data-size="32"></div>
If you’re not using the Button API, you can download a PNG.