Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps
OutSystems

Tag

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?