Text
Visão Geral
Para uma descrição detalhada, consulte a documentação do GovBR-DS.
Exemplos
Cor
Densidade
Tamanho
Truncado
Tipos
Propriedades
customId
| Atributo | custom-id |
| Descrição | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. |
| Tipo | string |
| Valor padrão | br-text-${brTextId++} |
density
| Atributo | density |
| Descrição | define o espaçamento vertical entre as linhas do texto(line-height) |
| Tipo | "compact" | "regular" | "spacious" |
| Valor padrão | 'regular' |
fontColor
| Atributo | font-color |
| Descrição | Define a variante de cor de fonte do componente, utilizando os tokens de cor estabelecidos no sistema de design para garantir a consistência visual. |
| Tipo | "contrast-primary" | "contrast-secondary" | "main-primary" | "main-secondary" |
| Valor padrão | 'main-primary' |
language
| Atributo | language |
| Descrição | Define o código de idioma principal (language tag) do componente, seguindo o padrão BCP-47 (ex: 'pt-BR', 'en-US'). Este valor é utilizado para internacionalização (i18n), formatação específica de idioma e acessibilidade. |
| Tipo | string |
| Valor padrão | 'pt-BR' |
semanticTag
| Atributo | semantic-tag |
| Descrição | Define a tag HTML semântica que envolverá o conteúdo (ex: 'p', 'h1'). Se não for informada, o componente renderizará apenas o texto bruto (plain text), garantindo flexibilidade visual sem comprometer a estrutura do documento. |
| Tipo | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" |
| Valor padrão | --- |
size
| Atributo | size |
| Descrição | define o tamanho da fonte que o componente vai exibir. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
truncate
| Atributo | truncate |
| Descrição | Habilita o truncamento do texto. Deve ser evitado, mas pode ser usado quando a quantidade de caracteres é crítica. |
| Tipo | 1 | 2 | 3 |
| Valor padrão | --- |
type
| Atributo | type |
| Descrição | define o tipo de ênfase visual que o componente vai exibir. |
| Tipo | "label" | "title" |
| Valor padrão | 'label' |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"custom-text" | Alvo de estilização que encapsula o conteúdo textual do componente. Pode ser renderizado como span, h1-h6 ou p. Utilize o seletor ::part(text-custom) para aplicar estilos CSS customizados externamente. |
Slots
| Nome | Descrição |
|---|---|
"default" | Conteúdo textual que será exibido. |
Variáveis CSS customizáveis
| Nome | Descrição |
|---|---|
--br-text-color-contrast-primary | Token de componente text, do tipo title que faz referência ao token de valor global de cor de constraste da fonte. para este componente esse é a cor primaria da fonte. |
--br-text-color-main-primary | Token de componente text, do tipo title que faz referência ao token de valor global de cor de fonte. para este componente esse é a cor primaria da fonte . |
--br-text-color-main-secondary | Token de componente text, do tipo title que faz referência ao token de valor global de cor de fonte. para este componente esse é a cor secundaria da fonte. |
--text-font-density | * Permite a sobrescrita externa do line-height, atuando como intermediário para os tokens de fonte definidos pela propriedade density interna do componente. |
--text-font-size | * Permite a sobrescrita externa do font-size, atuando como intermediário para os tokens de fonte definidos pela propriedade size interna do componente. |