Text
Escribe y da formato a bloques de texto con jerarquía tipográfica básica dentro de páginas y componentes.
- Escribir texto de corrido con jerarquía básica: párrafos, descripciones, ayudas de campo o cualquier contenido narrativo dentro de una pantalla. Ej.: la explicación de una configuración, el detalle de un pedido.
- Dar formato a un fragmento puntual de contenido: resaltar una palabra o un valor específico dentro de una oración usando as="span", sin generar un salto de bloque. Ej.: destacar un precio o una fecha dentro de una frase.
- Mostrar contenido que siempre debe estar visible: cuando el texto es esencial para el contexto y no debe quedar oculto detrás de una interacción. Ej.: una condición de venta que la persona necesita leer antes de continuar.
- Titular una pantalla, sección o componente: dar jerarquía semántica y visual a un título o subtítulo. En su lugar, usar Title.
- Categorizar o etiquetar un valor: representar el estado de un elemento con palabras clave, íconos y colores. En su lugar, usar Tag.
- Comunicar una cantidad breve: mostrar un contador o un indicador de novedad. En su lugar, usar Badge.
Los cambios se guardan automáticamente
p: genera un bloque de texto independiente. Valor por defecto.
Envío gratis a partir de $50.000
span: aplica estilo a un fragmento dentro de una línea, sin interrumpir el flujo del texto que lo contiene.
Total del pedido: $12.500
Highlight: el tamaño más grande; para un dato puntual que necesita destacarse. Usar con moderación, nunca en bloques largos.
El pedido se despacha dentro de las 48 horas hábiles.
Base: tamaño de lectura estándar; para el cuerpo principal de texto. Valor por defecto.
Actualizado hace 5 minutos
Caption: el tamaño más chico; para contenido secundario o aclaraciones, nunca como cuerpo principal.
Envío estándar
Regular: peso liviano para texto de corrido. Valor por defecto.
Envío estándar
Medium: énfasis leve, para diferenciar un dato sin llegar al peso completo de negrita.
Envío estándar
Bold: máximo énfasis. Usar puntualmente para resaltar un dato clave, nunca en bloques largos de texto.
Se aplicó el descuento correctamente.
Neutral: color por defecto para texto de corrido, sin urgencia. Valor por defecto.
Nuevo: probá el checkout en un paso.
Primary: para destacar una novedad o un dato relevante sin transmitir urgencia.
El pago se acreditó correctamente.
Success: para confirmar un resultado positivo.
Este producto tiene stock bajo.
Warning: para una advertencia que pide atención, sin ser un error.
No se pudo procesar el pago.
Danger: para un error o un dato crítico que requiere acción.
Total: $12.500
Left: para texto de corrido. Valor por defecto.
Total: $12.500
Center: para información puntual o autocontenida, como un mensaje dentro de una tarjeta vacía.
Total: $12.500
Right: para valores dentro de una columna de datos, como un precio en una tabla.
Text acompaña casi cualquier bloque de contenido: la descripción de un campo, el detalle de un pedido o una ayuda dentro de una tarjeta. Las propiedades de tamaño, peso y color pueden variar por breakpoint ({ xs, md, lg, xl, xxl }) para adaptar la jerarquía tipográfica entre mobile y desktop.
Envío gratis
Se aplica automáticamente a partir de $50.000 en compras dentro de Argentina.
Válido hasta agotar stock
Total a pagar: $12.500
Usar bold con moderación, solo para resaltar un dato puntual.
Recordá que el envío gratis se aplica solamente a compras superiores a $50.000 realizadas dentro de Argentina.
Evitar bold en bloques largos de texto: pierde el efecto de énfasis.
El pedido se despacha dentro de las 48 horas hábiles posteriores a la confirmación del pago.
Preferir el tamaño base para bloques largos de texto.
El pedido se despacha dentro de las 48 horas hábiles posteriores a la confirmación del pago.
Evitar el tamaño highlight en textos largos: dificulta la lectura.
Envío:
Gratis
Mantener el mismo estilo de texto cuando hay contenidos distintos en una misma línea.
Envío:
Gratis
Evitar tamaños contrastantes dentro de la misma línea.
Última actualización: hace 5 minutos
Usar colores que no se confundan con los colores interactivos.
Última actualización: hace 5 minutos
Evitar colores parecidos a los interactivos en texto que no lo es.
- Elegir bien la etiqueta HTML: as="p" para un bloque de texto independiente y as="span" para un fragmento dentro de otro elemento; Text no reemplaza a un encabezado, así que no lo uses para simular jerarquía semántica de título.
- Agregar atributos ARIA propios cuando haga falta: Text no aplica ningún rol ni atributo de accesibilidad por sí mismo; si el contenido cambia dinámicamente (por ejemplo, un mensaje de error), agregar aria-live u otro atributo apropiado en el uso concreto.
- Contraste suficiente: mantener el contraste entre el color del texto y el fondo para garantizar la legibilidad (WCAG AA), sobre todo al usar colores textLow sobre superficies con color.
- Evaluar visualmente el color ai-generative: al ser un degradé, puede cambiar el comportamiento de otras propiedades como width y display; revisar el resultado visual antes de combinarlo con lineClamp o textOverflow.
Instalá el componente vía terminal.
npm install @nimbus-ds/componentsimport 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;Las propiedades adicionales se pasan al elemento <Text>. Consultá la documentación del elemento p para ver la lista de atributos aceptados.
Text
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | The content of the link. | |
as | 'p' | 'p' | Type of html tag to create for the Text component. |
fontSize | 'base' | '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' | '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' | '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' | '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' | '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' | 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' | 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' | 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' | 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' | 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
| Name | Type | Default | Description |
|---|---|---|---|
fontSize | 'base' | ||
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. |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.