Auth block
Updated 21 days agoThe Auth Block allows users to log in or sign up by entering their credentials. It provides a structured input form along with a customizable button to guide user actions.
Input
This section controls how the input fields (such as email and password) appear and behave.
Label Text
This defines the labels shown above each input field (e.g., Email, Password).
You can customize:
-
Text – Set the label name (Email, Password, etc.)
-
Font – Choose a font that matches your design
-
Size/Weight – Adjust how bold or subtle the label appears
-
Line Height – Control spacing between lines
-
Letter Spacing – Adjust spacing between characters
-
Color – Choose a readable text color
Input Text
This controls how the text entered by the user appears inside the input field.
You can customize:
-
Font – Select the font style
-
Size/Weight – Adjust size and thickness
-
Line Height – Control vertical spacing
-
Letter Spacing – Adjust spacing between characters
-
Color – Choose the text color
Input Background
This controls the appearance of the input field container.
You can customize:
-
Color – Set the background color
-
Radius – Adjust corner roundness
-
Padding – Control inner spacing
Input Border
This defines the border styling for the input field.
You can customize:
-
Idle Color – Border color when the field is inactive
-
Active Color – Border color when the user is interacting
-
Width – Adjust border thickness
Button
This section controls the appearance and behavior of the authentication button (e.g., Login, Sign Up).
You can customize:
Text Style
-
Text – Add the button label
-
Font – Choose font style
-
Size/Weight – Adjust size and boldness
-
Line Height – Control spacing
-
Letter Spacing – Adjust spacing between characters
-
Text Color – Choose a readable color
-
Alignment – Position the text
-
Capitalization – Set text case
Border
-
Color – Choose border color
-
Width – Adjust thickness
Icons
-
Left Icon – Choose or upload an icon and set its color
-
Right Icon – Choose or upload an icon and set its color
Advanced Settings
-
Background Color – Set button background color
-
Radius – Adjust corner roundness
-
Padding – Control inner spacing
-
Relation – Define spacing between text and icons
Background and Spacing
This section controls the layout and outer styling of the entire Auth Block.
Background
-
Color – Set the section background color
-
Radius – Adjust corner roundness
-
Padding – Control spacing inside the section
-
Margin – Manage spacing outside the section
Border
-
Color – Choose border color
-
Width – Adjust thickness
-
Sides – Select which sides should display the border
Benefits:
-
Creates a clear and guided authentication experience
-
Reduces friction during onboarding
-
Builds trust through familiar and polished UX
-
Creates consistency in the account journey
-
Supports long-term customer retention
Related Articles
