Badge
The Badge element displays colored inline tags or pills. Use it for categories, status indicators, labels, or any short text that benefits from visual distinction.
Overview
Badges render as small colored labels displayed inline:
[ Muay Thai ] [ Striking ] [ Advanced ] [ Competition ]
Common uses:
- Category tags (e.g., technique styles)
- Status indicators (e.g., Active, Pending, Archived)
- Skill levels (e.g., Beginner, Intermediate, Advanced)
- Attributes or features
Adding a Badge
- Open the Website Builder
- Find Badge in the Elements panel (under Display)
- Drag it onto your page
- Configure badge items in the General Tab
Properties
General Tab
Data Source
| Option | Description |
|---|---|
| Static | Define badge items manually |
| From Element | Pull data from another element (e.g., JSON Data Source) |
Static Badge Items
Add badges directly:
- Click Add Badge to add a new item
- Enter the Tag text and pick a Color using the color picker
- Click the X button to remove an item
Element Data Source
When using "From Element":
| Property | Description |
|---|---|
| Source Element ID | The ID of the source element |
| Text Field | Field name for badge text (e.g., name) |
| Color Field | Field name for badge color (e.g., color) |
| Separator | Character to split string values into multiple badges (default: |) |
String splitting: If the source value is a string like "Muay Thai|Striking|Advanced", it is automatically split by the separator into individual badges.
Appearance Settings
| Property | Options | Default |
|---|---|---|
| Size | Small, Medium, Large | Medium |
| Shape | Rounded (6px), Pill (50px), Square (0px) | Rounded |
| Layout | Inline (single row), Wrap (flows to next line) | Inline |
Color Tab
| Property | Description | Default |
|---|---|---|
| Background Color | Container background | Transparent |
| Border Color | Container border | Transparent |
Dimensions Tab
| Property | Description |
|---|---|
| Width | Element width |
| Height | Element height (auto by default) |
| Padding | Inner spacing |
| Margin | Outer spacing |
| Border Radius | Corner rounding |
Use Cases
Category Tags
Display technique or content categories with distinct colors.
Status Indicators
Show item status with color-coded badges (green for active, red for archived, etc.).
Skill Levels
Display difficulty or proficiency levels.
Feature Labels
Highlight product features or attributes.
Best Practices
Use distinct colors - Make each badge visually distinguishable
Keep text short - Badges work best with 1-3 words
Use Wrap layout for many badges - Prevents horizontal overflow
Use Pill shape for tags - The rounded pill shape is the most common tag/chip style
Use consistent colors - Assign the same color to the same category across your app
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.
Useful Links:
Web Elements - https://help.acenji.com/#/./create-web-application/elements/index