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.
-
Drag the Tag pattern into the preview.
-
Drag your text to this placeholder.
-
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
- Set the Color parameter to Transparent.
-
In the ExtendedClass property, set the text color.
-
Set the border size.
-
Publish and test.
