• Titular uma tela, página ou seção principal: marcar o início de uma página ou um bloco de conteúdo grande com hierarquia semântica. Ex.: "Configuração de envio", "Gestão de produtos".
• Dividir conteúdo longo em subseções: estruturar a informação usando diferentes níveis de títulos para melhorar a legibilidade e a navegação. Ex.: usar h2 para categorias principais e h3 para subcategorias dentro de uma seção.
• Oferecer contexto e propósito a uma seção: fazer com que a pessoa entenda imediatamente do que se trata o conteúdo que vem a seguir sem precisar ler o corpo do texto. Ex.: um h2 que introduz uma lista de variantes de um produto.

• Escrever texto corrido ou parágrafos: usar conteúdo narrativo, descrições longas ou ajudas de campo. Nesse caso, usar Text.
• Categorizar ou etiquetar um valor: representar o estado de um elemento com palavras-chave, ícones e cores. Nesse caso, usar Tag.
• Comunicar uma quantidade breve: mostrar um contador ou um indicador de novidade. Nesse caso, usar Badge.

A etiqueta HTML (as) define a hierarquia semântica do título dentro do documento: como ele é interpretado por leitores de tela e buscadores, independentemente do seu tamanho visual.

O tamanho controla-se independentemente da hierarquia semântica. Permite usar um tamanho visual diferente do que corresponderia por semântica HTML, mantendo o nível semântico correto (ex. h2 com tamanho visual de h3).

O componente Title utiliza-se em toda a interface para estruturar e hierarquizar a informação. Costuma aparecer no início de telas, seções, modais, cards e outros contêineres que necessitam de um cabeçalho claro.

• Usar etiquetas semânticas corretas: marcar títulos com h1–h6 conforme seu nível de hierarquia, não com span ou div. Leitores de tela usam esses cabeçalhos para navegar a estrutura da página.
• Um único h1 por página: o h1 identifica o tema principal da página. Usar múltiplos h1 confunde a navegação.
• Manter uma estrutura sequencial: não saltar níveis (ex. h1 → h3); respeita a hierarquia para que navegadores e tecnologias assistivas entendam a organização.
• Contraste suficiente (WCAG AA): escolher uma cor que contraste claramente com o fundo (ex. não usar cores muito similares como texto cinzento sobre fundo claro).

O título descreve a realidade, não a vende. Não é publicidade nem aspiracional: é o primeiro texto que a pessoa processa ao chegar em uma tela ou seção, e se ele falha, tudo o que vem depois também falha. O título é um mapa, não um motivador.

• Capitalização: sentence case em todos os níveis. Exceções: nomes próprios ("Mercado Pago", "Brasil") e siglas ("SKU", "CEP", "URL"). Os nomes de funcionalidades do admin não são nomes próprios: "administrador de pagamentos", não "Administrador de Pagamentos".
• Pontuação: sem ponto final em nenhum nível; sem dois pontos no final.
• Comprimento: H1 de página, até 40 caracteres (1 a 4 palavras); H1 de elemento específico, sem limite (o título mostra o nome completo, dinâmico); H2, até 30 caracteres (1 a 3 palavras); H3, até 25 caracteres (1 a 3 palavras).
• Pessoa gramatical: os títulos não têm pessoa gramatical, descrevem elementos e seções, não falam com a pessoa. O "você" aparece em subtítulos, CTAs e corpo de texto, nunca em H1, H2 ou H3.

• O H1 da página e o label do botão de ação primária precisam estar alinhados: se o título diz "Produtos", o botão diz "Adicionar produto", não "Novo".
• O título de um Modal coincide com o label do botão que o abriu.
• O título de um Alert descreve o efeito sobre a pessoa, não o nome do estado técnico.

Instale o componente via terminal.

Usado para o título principal da página; deve usar-se uma única vez.

As propriedades adicionais passam-se ao elemento <Title>. Consulte a documentação para ver a lista de atributos aceitos pelos elementos <h1> a <h6>.

• Text — para parágrafos e texto corrido.
• Tag — para categorizar ou etiquetar um valor.
• Badge — para mostrar quantidades ou indicadores de novidade.

Title