Badge Emblema
Introdução
O componente Badge é um pequeno e versátil elemento visual usado para rotular, categorizar ou destacar metadados de conteúdo. É comumente utilizado para exibir status (como "Sucesso" ou "Pendente"), tags ou contadores numéricos.
Através do CMS Page Builder, os autores de conteúdo podem configurar rapidamente variantes de emblemas, tamanhos e paletas de cores para se ajustarem perfeitamente às suas diretrizes de layout.
Uso
Você pode personalizar a aparência dos distintivos usando estilos visuais, cores personalizadas e tamanhos responsivos.
Variantes de estilo
O componente suporta múltiplos estilos de exibição visual para ajudar a estabelecer a hierarquia visual.
{
"type": "badge",
"text": "New Feature",
"variant": "solid",
"colorPalette": "blue"
}
Paletas de cor
Escolha entre uma ampla gama de cores de acento do tema para indicar significados semânticos.
{
"type": "badge",
"text": "Error Detected",
"variant": "solid",
"colorPalette": "red"
}
Opções de tamanho
Dimensione seus distintivos de pílulas de metadados compactas a etiquetas de callout maiores.
{
"type": "badge",
"text": "Large Label",
"size": "lg",
"colorPalette": "blue",
"variant": "subtle"
}
Propriedades
Ao adicionar um bloco badge dentro do esquema do Page Builder (content/pages/*.json), os seguintes parâmetros de configuração estão disponíveis:
| Parameter | Type | Default | Description |
|---|---|---|---|
type | String | - | O identificador do bloco. Deve ser definido como "badge". |
text | String | - | O conteúdo do rótulo de texto renderizado dentro do emblema. |
variant | Select | "subtle" | O tratamento de estilo visual. Opções: "solid", "subtle", "surface", "outline". |
colorPalette | Select | "green" | Acento de cor temática semântica. Opções: "blue", "green", "red", "purple", "orange", "amber", "cyan", "slate", "gray". |
size | Select | "md" | As dimensões físicas do emblema. Opções: "sm", "md", "lg", "xl", "2xl". |
class | String | - | Substituições de classe CSS personalizadas aplicadas diretamente ao emblema. |