Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps

 

OutSystems

Tag

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Style small texts in a colored tag format.

    Use Tags to display status, labels or categories thus providing great user experience.

    How to use

    Drag the pattern to the screen and add the text in the placeholder.

    1. Drag the Tag pattern into the preview.

    2. Drag your text to this placeholder.

    3. Set the Input Parameters to extend the default values.

    Input Parameters

    Input Name Description Type Mandatory Default Value
    Color Set the backgound color. Color Identifier False Entities.Color.Primary
    Shape Set the shape. Shape Identifier False Entities.Shape.Rounded
    Size Set the size. Size Identifier False None
    IsLight Use the lightest color version for the background and the darker color version for the text. Boolean False False
    ExtendedClass Add custom style classes to this Block. Text False None

    Layout and Classes

    Advanced Use Case

    Use only border in Tag Pattern

    1. Set the Color parameter to Transparent.
    2. In the ExtendedClass property, set the text color.

    3. Set the border size.

    4. Publish and test.

    • Was this article helpful?