Skip to main content




Applies only to Traditional Web Apps




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?