Match Level
Description
The Match Level component is a visual indicator used to display the level of match or compatibility in a compact, badge-like format. It dynamically adjusts its appearance based on the provided match level.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| matchLevel | string | The level of match to be displayed. This value is used to determine the background and text color of the badge, as well as the displayed text. | |
| attributes | array | [] | Additional HTML attributes to be applied to the badge container. |
| class | string | bg-scale-{matchLevel} text-scale-{matchLevel} rounded px-2 py-1.5 text-xs font-normal leading-[normal] | The base CSS classes applied to the badge. The {matchLevel} placeholder is replaced with the actual match level value. |
Example
Low
Medium
High
<x-uxlibrary.badges.match-level :matchLevel="low" />
<x-uxlibrary.badges.match-level :matchLevel="medium" />
<x-uxlibrary.badges.match-level :matchLevel="high" />
