Skip to main content




Applies only to Traditional Web Apps




  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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?