User Auth styles

Customize the User Auth drop-in using CSS classes and design tokens. This page covers the User Auth-specific container classes and customization examples. For comprehensive information about design tokens, responsive breakpoints, and styling best practices, see Styling Drop-In Components.

Version: 2.1.5

Customization example

Add this to the CSS file of the specific commerce block where you’re using the User Auth drop-in.

For a complete list of available design tokens (colors, spacing, typography, etc.), see the Design tokens reference.

1
.auth-email-confirmation-form {
2
  border-radius: 8px;
3
  background-color: var(--color-neutral-50, #fff);
4
  padding: var(--spacing-small) var(--spacing-small) var(--spacing-medium);
5
  border-radius: 12px;
6
  background-color: var(--color-brand-50, #fff);
7
  padding: var(--spacing-medium) var(--spacing-small) var(--spacing-medium);
8
}

Container classes

The User Auth drop-in uses BEM-style class naming. Use the browser DevTools to inspect elements and find specific class names.

1
/* Button */
2
.auth-button {}
3
.auth-button__loader {}
4
.auth-button__text {}
5
.auth-button__wrapper {}
6
.auth-custom-button__loader {}
7
.enableLoader {}
8

9
/* EmailConfirmationForm */
10
.auth-email-confirmation-form {}
11
.auth-email-confirmation-form--small {}
12
.auth-email-confirmation-form__buttons {}
13
.auth-email-confirmation-form__notification {}
14
.auth-email-confirmation-form__subtitle {}
15
.auth-email-confirmation-form__text {}
16
.auth-email-confirmation-form__title {}
17

18
/* Form */
19
.auth-form {}
20

21
/* ResetPasswordForm */
22
.auth-reset-password-form {}
23
.auth-reset-password-form--small {}
24
.auth-reset-password-form__buttons {}
25
.auth-reset-password-form__form {}
26
.auth-reset-password-form__form__item {}
27
.auth-reset-password-form__notification {}
28
.auth-reset-password-form__title {}
29

30
/* SignInForm */
31
.auth-sign-in-form {}
32
.auth-sign-in-form--small {}
33
.auth-sign-in-form__button--signup {}
34
.auth-sign-in-form__form {}
35
.auth-sign-in-form__form__buttons {}
36
.auth-sign-in-form__form__buttons__combine {}
37
.auth-sign-in-form__form__email {}
38
.auth-sign-in-form__form__password {}
39
.auth-sign-in-form__notification {}
40
.auth-sign-in-form__resend-email-notification {}
41
.auth-sign-in-form__title {}
42

43
/* SignUpForm */
44
.auth-sign-up-form {}
45
.auth-sign-up-form--small {}
46
.auth-sign-up-form-buttons {}
47
.auth-sign-up-form__automatic-login {}
48
.auth-sign-up-form__form {}
49
.auth-sign-up-form__form__confirm-wrapper {}
50
.auth-sign-up-form__form__field {}
51
.auth-sign-up-form__form__field--confirm-password {}
52
.auth-sign-up-form__notification {}
53
.auth-sign-up-form__title {}
54

55
/* SuccessNotificationForm */
56
.auth-success-notification-form {}
57
.auth-success-notification-form--small {}
58
.auth-success-notification-form__button--top {}
59
.auth-success-notification-form__content-text {}
60
.auth-success-notification-form__title {}
61

62
/* UpdatePasswordForm */
63
.auth-update-password-form {}
64
.auth-update-password-form--small {}
65
.auth-update-password-form__form {}
66
.auth-update-password-form__form__item {}
67
.auth-update-password-form__notification {}
68
.auth-update-password-form__notification--show {}
69
.auth-update-password-form__title {}