Documentação

Guia de conteúdo

Getting startedReleases

Recursos

Ferramentas

Tokens

Componentes atómicos

Componentes compostos

Patterns

Templates

Experiências de IA

Contributing

Text

6.8.0

Escreva e formate blocos de texto com hierarquia tipográfica básica dentro de páginas e componentes.

Ver no Figma
Ver no Storybook
Ver no Github
Ver pacote de npm
Reportar um bug

Quando usar

  • Escrever texto corrido com hierarquia básica: parágrafos, descrições, ajudas de campo ou qualquer conteúdo narrativo dentro de uma tela. Ex.: a explicação de uma configuração, o detalhe de um pedido.
  • Formatar um trecho pontual de conteúdo: destacar uma palavra ou um valor específico dentro de uma frase usando as="span", sem gerar uma quebra de bloco. Ex.: destacar um preço ou uma data dentro de uma frase.
  • Mostrar conteúdo que sempre deve estar visível: quando o texto é essencial para o contexto e não deve ficar oculto atrás de uma interação. Ex.: uma condição de venda que a pessoa precisa ler antes de continuar.

Quando não usar

  • Titular uma tela, seção ou componente: dar hierarquia semântica e visual a um título ou subtítulo. Nesse caso, usar Title.
  • Categorizar ou classificar 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.

Variantes

Elemento HTML

As alterações são salvas automaticamente

p: gera um bloco de texto independente. Valor padrão.

Frete grátis a partir de R$250

span: aplica estilo a um trecho dentro de uma linha, sem interromper o fluxo do texto que o contém.

Tamanho da fonte

Total do pedido: R$125

Highlight: o tamanho mais grande; para um dado pontual que precisa se destacar. Usar com moderação, nunca em blocos longos.

O pedido é despachado dentro de 48 horas úteis.

Base: tamanho de leitura padrão; para o corpo principal de texto. Valor padrão.

Atualizado há 5 minutos

Caption: o tamanho mais pequeno; para conteúdo secundário ou observações, nunca como corpo principal.

Peso da fonte

Frete padrão

Regular: peso leve para texto corrido. Valor padrão.

Frete padrão

Medium: ênfase leve, para diferenciar um dado sem chegar ao peso completo de negrito.

Frete padrão

Bold: ênfase máxima. Usar pontualmente para destacar um dado chave, nunca em blocos longos de texto.

Cor

O desconto foi aplicado corretamente.

Neutral: cor padrão para texto corrido, sem urgência. Valor padrão.

Novidade: experimente o checkout em uma etapa.

Primary: para destacar uma novidade ou um dado relevante sem transmitir urgência.

O pagamento foi creditado corretamente.

Success: para confirmar um resultado positivo.

Este produto está com estoque baixo.

Warning: para um alerta que pede atenção, sem ser um erro.

Não foi possível processar o pagamento.

Danger: para um erro ou um dado crítico que exige ação.

Alinhamento

Total: R$125

Left: para texto corrido. Valor padrão.

Total: R$125

Center: para informação pontual ou autocontida, como uma mensagem dentro de um cartão vazio.

Total: R$125

Right: para valores dentro de uma coluna de dados, como um preço em uma tabela.

Aplicação

O Text acompanha quase qualquer bloco de conteúdo: a descrição de um campo, o detalhe de um pedido ou uma ajuda dentro de um cartão. As propriedades de tamanho, peso e cor podem variar por breakpoint ({ xs, md, lg, xl, xxl }) para adaptar a hierarquia tipográfica entre mobile e desktop.

Frete grátis

Aplicado automaticamente a partir de R$250 em compras no Brasil.

Válido até o fim do estoque

Do and Don'ts

Total a pagar: R$125

Usar bold com moderação, apenas para destacar um dado pontual.

Lembre-se que o frete grátis se aplica apenas a compras superiores a R$250 realizadas no Brasil.

Evitar bold em blocos longos de texto: perde o efeito de ênfase.

O pedido é despachado dentro de 48 horas úteis após a confirmação do pagamento.

Preferir o tamanho base para blocos longos de texto.

O pedido é despachado dentro de 48 horas úteis após a confirmação do pagamento.

Evitar o tamanho highlight em textos longos: dificulta a leitura.

Frete:

Grátis

Manter o mesmo estilo de texto quando há conteúdos diferentes na mesma linha.

Frete:

Grátis

Evitar tamanhos contrastantes dentro da mesma linha.

Última atualização: há 5 minutos

Usar cores que não se confundam com as cores interativas.

Última atualização: há 5 minutos

Evitar cores parecidas com as interativas em texto que não é interativo.

Acessibilidade

  • Escolher bem a tag HTML: as="p" para um bloco de texto independente e as="span" para um trecho dentro de outro elemento; o Text não substitui um heading, então não o use para simular hierarquia semântica de título.
  • Adicionar atributos ARIA próprios quando necessário: o Text não aplica nenhum papel ou atributo de acessibilidade por si só; se o conteúdo mudar dinamicamente (por exemplo, uma mensagem de erro), adicionar aria-live ou outro atributo apropriado no uso concreto.
  • Contraste suficiente: manter o contraste entre a cor do texto e o fundo para garantir a legibilidade (WCAG AA), principalmente ao usar cores textLow sobre superfícies com cor.
  • Avaliar visualmente a cor ai-generative: por ser um gradiente, pode mudar o comportamento de outras propriedades como width e display; revisar o resultado visual antes de combiná-la com lineClamp ou textOverflow.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/components
import React from "react";
import { Text } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <Text as="p">The order ships within 48 business hours.</Text>
);

export default Example;

Props

As propriedades adicionais são repassadas ao elemento <Text>. Consulte a documentação do elemento p para ver a lista de atributos aceitos.

Componentes relacionados

  • Title — Para titular telas, páginas, blocos de texto, seções ou outros componentes, com hierarquia visual e semântica.
  • Tag — Para categorizar informação ou o estado de um elemento usando palavras-chave, ícones e cores.
  • Badge — Para comunicar a quantidade de itens ou de ações pendentes.

Text

NameTypeDefaultDescription

children*

React.ReactNode

The content of the link.

as

'p'
'span'

'p'

Type of html tag to create for the Text component.

fontSize

'base'
'caption'
'highlight'

'base'

The fontSize property sets the size of the text.

This is a responsive property and you can have the options below available for you to use.

'{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'

fontWeight

'bold'
'medium'
'regular'

'regular'

The fontWeight property sets how thick or thin characters in text should be displayed.

This is a responsive property and you can have the options below available for you to use.

'{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'

color

'ai-generative'
'currentColor'
'danger-interactive'
'danger-surface'
'danger-textHigh'
'danger-textLow'
'neutral-background'
'neutral-interactive'
'neutral-surface'
'neutral-textDisabled'
'neutral-textHigh'
'neutral-textLow'
'primary-interactive'
'primary-surface'
'primary-textHigh'
'primary-textLow'
'success-interactive'
'success-interactivePressed'
'success-surface'
'success-textHigh'
'success-textLow'
'warning-interactive'
'warning-surface'
'warning-textHigh'
'warning-textLow'

'neutral-textLow'

The color property is used to set the color of the text. Note: Gradients like 'ai-generative' changes other properties like 'width' and 'display', which could make the component behave differently. Ensure to visually test the component when dynamically changing the color.

This is a responsive property and you can have the options below available for you to use.

'{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'

lineHeight

'base'
'caption'
'highlight'

'base'

The lineHeight property specifies the line height of the text.

This is a responsive property and you can have the options below available for you to use.

'{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'

textAlign

'center'
'justify'
'left'
'right'

'left'

The textAlign property specifies the horizontal alignment of text.

This is a responsive property and you can have the options below available for you to use.

'{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'

textOverflow

'clip'
'ellipsis'

The textOverflow property specifies how overflowed content that is not displayed should be signaled to the user (e.g., 'ellipsis' for '...', 'clip' for hard cutoff). Note: This property only works when overflow is set to 'hidden'.

This is a responsive property and you can have the options below available for you to use.

'{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'

whiteSpace

'break-spaces'
'normal'
'nowrap'
'pre'
'pre-line'
'pre-wrap'

The whiteSpace property sets how white space inside an element is handled.

This is a responsive property and you can have the options below available for you to use.

'{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'

wordBreak

'break-all'
'break-word'
'keep-all'
'normal'

The wordBreak property sets whether line breaks appear wherever the text would otherwise overflow its content box.

This is a responsive property and you can have the options below available for you to use.

'{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'

lineClamp

number

The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.

This is a responsive property and you can have the options below available for you to use.

'{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'

overflow

'auto'
'hidden'
'scroll'
'visible'

The overflow property specifies what happens if content overflows an element's box.

This is a responsive property and you can have the options below available for you to use.

'{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'

textDecoration

'line-through'
'none'
'underline'

The textDecoration shorthand property sets the appearance of decorative lines on text.

This is a responsive property and you can have the options below available for you to use.

'{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }'

Text.Skeleton

NameTypeDefaultDescription

fontSize

'base'
'caption'
'highlight'

width

string

Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.

className

string

height

string

Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.

data-testid

string

This is an attribute used to identify a DOM node for testing purposes.

Ajude-nos a melhorar a documentação

Encontrou um problema ou tem uma sugestão? Conte para a gente.

Compartilhe seu feedback