Index Level

Mostra o nível de prevalência ou prioridade de um conteúdo com um ícone de gráfico de barras e um label. As barras inativas continuam visíveis com opacidade menor, então o nível sempre pode ser lido em relação ao máximo.

A prop level aceita os mesmos valores do enum PriorityLevelType dos produtos:

Valor	Label completo	Label curto
p	Prioritário	Prioritário
h	Alta prevalência	Alta
m	Média prevalência	Média
l	Baixa prevalência	Baixa

Exemplos

Regular

Soft

Básico

Tamanhos

Nome curto

Conteúdo extra

Tudo o que for passado em children é renderizado depois do label, então você pode acrescentar informações complementares sem perder o label do nível.

Label personalizado e só ícone

Personalização

className, iconClassName e labelClassName são mesclados com as classes internas, então qualquer token pode ser sobrescrito.

Só o ícone (IndexLevelIcon)

O ícone pode ser usado sozinho, por exemplo dentro de listas ou células de tabela.

API

IndexLevel

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
level	string	"p", "h", "m", "l"	-	Obrigatório. Nível de prioridade, igual aos valores do enum PriorityLevelType.
variant	string	"regular", "soft", "basic"	"regular"	Define o estilo visual. basic renderiza sem fundo e sem padding.
size	string	"sm", "md"	"md"	Define o tamanho do ícone, a tipografia e os paddings.
shortName	boolean	true, false	false	Usa o label abreviado ("Alta") em vez do completo ("Alta prevalência").
label	React.ReactNode	-	-	Substitui o label derivado de level.
hideLabel	boolean	true, false	false	Oculta o label e mantém só o ícone (e eventuais children).
children	React.ReactNode	-	-	Conteúdo extra renderizado depois do label.
iconClassName	string	-	-	Classes CSS adicionais aplicadas ao slot do ícone.
labelClassName	string	-	-	Classes CSS adicionais aplicadas ao slot do label.
className	string	-	-	Classes CSS adicionais aplicadas ao elemento raiz.
asChild	boolean	true, false	false	Troca o elemento renderizado por padrão pelo elemento filho, mesclando props e comportamento.
...props	Todas as props nativas de span	-	-	Permite passar qualquer outra propriedade padrão de um elemento span.

IndexLevelIcon

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
level	string	"p", "h", "m", "l"	-	Obrigatório. Nível de prioridade renderizado pelo ícone.
size	string	"sm", "md"	"md"	Tamanho da caixa do ícone: sm tem 16px e md tem 20px.
baseOpacity	string	"40", "20"	"40"	Opacidade das barras inativas. O IndexLevel usa 40% em regular e 20% em soft/basic.
className	string	-	-	Classes CSS adicionais aplicadas ao wrapper do ícone.