Skip to main content





Component used in the OutSystems UI Login Layouts by default. Has CSS and Animated Labels along with all the basic pieces for a login.

This component can be used to accelerate the creation of a custom login page.

How to use

Drag the block to the respective placeholder when creating a custom login page.

Layout and Classes


Drag login related content to this placeholder.

Advanced Use Case

Add a Sign In button

  1. In the Interface tab, go to the Login screen.

  2. In the widgets tree, expand the Login placeholder.

  3. Drag a Columns 2 structure to the "layout-login-button" container.

  4. Drag the "Log In" button to the Column1 placeholder.

  5. Drag a new button to the Column2 placeholder and set the value of the Label to "Sign In".

  6. Publish and test.

Compatibility with other Patterns


  • Was this article helpful?