Index Level
Displays the prevalence/priority level of a content using a bar chart icon plus a label. The inactive bars stay visible with a lower opacity so the level is always readable in comparison to the maximum.
The level prop accepts the same values as the products’ PriorityLevelType enum:
| Value | Full label | Short label |
|---|---|---|
p | Prioritário | Prioritário |
h | Alta prevalência | Alta |
m | Média prevalência | Média |
l | Baixa prevalência | Baixa |
Examples
Regular
Preview
PrioritárioAlta prevalênciaMédia prevalênciaBaixa prevalência
Soft
Preview
PrioritárioAlta prevalênciaMédia prevalênciaBaixa prevalência
Basic
Preview
PrioritárioAlta prevalênciaMédia prevalênciaBaixa prevalência
Sizes
Preview
Alta prevalênciaAlta prevalênciaMédia prevalênciaMédia prevalênciaBaixa prevalênciaBaixa prevalência
Short name
Preview
PrioritárioAltaMédiaBaixa
Extra content
Anything passed as children is rendered after the label, so you can append complementary information without losing the level label.
Preview
Alta
· 12 aulas
Média prevalênciaem Clínica MédicaCustom label and icon only
Preview
Prioridade máxima
Customization
className, iconClassName and labelClassName are merged with the internal classes, so any token can be overridden.
Preview
Alta prevalênciaMédia prevalência
Icon only (IndexLevelIcon)
The icon can be used standalone, e.g. inside lists or table cells.
Preview
API
IndexLevel
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| level | string | ”p”, “h”, “m”, “l” | - | Required. Priority level, matching the PriorityLevelType enum values. |
| variant | string | ”regular”, “soft”, “basic" | "regular” | Sets the visual style. basic renders without background and without padding. |
| size | string | ”sm”, “md" | "md” | Sets the icon size, typography and paddings. |
| shortName | boolean | true, false | false | Uses the abbreviated label (“Alta”) instead of the full one (“Alta prevalência”). |
| label | React.ReactNode | - | - | Overrides the label derived from level. |
| hideLabel | boolean | true, false | false | Hides the label, keeping only the icon (and any children). |
| children | React.ReactNode | - | - | Extra content rendered after the label. |
| iconClassName | string | - | - | Additional CSS classes applied to the icon slot. |
| labelClassName | string | - | - | Additional CSS classes applied to the label slot. |
| className | string | - | - | Additional CSS classes to apply to the root element. |
| asChild | boolean | true, false | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| …props | All native span props | - | - | Allows passing any other standard properties of a span element. |
IndexLevelIcon
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| level | string | ”p”, “h”, “m”, “l” | - | Required. Priority level rendered by the icon. |
| size | string | ”sm”, “md" | "md” | Icon box size — sm is 16px and md is 20px. |
| baseOpacity | string | ”40”, “20" | "40” | Opacity of the inactive bars. IndexLevel sets 40% on regular and 20% on soft/basic. |
| className | string | - | - | Additional CSS classes to apply to the icon wrapper. |
Last updated on