Text

Aplica a escala tipográfica dos Fundamentos a qualquer elemento. Uma única dimensão de estilo — variant — que mapeia 1:1 aos tokens do 02 Tipografia (display · heading · body · label · code). Cor por tone (01 Cor · content). Sem tamanho/peso/margem soltos.

Componente Arrow

Este componente foi elevado ao padrão Arrow — reescrito sobre os Fundamentos, consumindo o DNA de tokens (cor, tipografia, forma, espaço, movimento) sem valor solto, com API limpa, acessibilidade e render validado. O selo no card confirma: virou Arrow de verdade.

Playground

Importação

import { Text } from '@arrow/components-vue'

Uso básico

Renderiza <span> com body-md por padrão. Use variant pra hierarquia e tag pro elemento semântico.

Texto padrão (body-md)

<Text>Texto padrão (body-md)</Text>

A escala (variant)

Cada variant é um token do Fundamento 02 — família-tamanho.

Display · títulos de impacto

Heading · seções da página

Body · leitura confortável da interface

LABEL · rótulos e metadados

code · 1234 monoespaçado tabular

<Text variant="display-md" tag="h1">Display</Text>
<Text variant="heading-lg" tag="h2">Heading</Text>
<Text variant="body-md" tag="p">Body</Text>
<Text variant="label-md" tag="span">Label</Text>
<Text variant="code-md" tag="code">code</Text>

Famílias e tamanhos disponíveis: display (2xl·xl·lg·md) · heading (xl·lg·md·sm) · body (lg·md·sm·xs) · label (lg·md·sm) · code (lg·md·sm).

Tag semântica

O estilo é independente da tag — escolha o elemento certo pra estrutura.

h1 com estilo heading-md

p com estilo body-sm

<Text variant="heading-md" tag="h1">h1 com estilo heading-md</Text>
<Text variant="body-sm" tag="p">p com estilo body-sm</Text>

Cor · tone

primarysecondarytertiaryaccent

<Text tone="primary">primary</Text>
<Text tone="secondary">secondary</Text>
<Text tone="tertiary">tertiary</Text>
<Text tone="accent">accent</Text>

Truncar · truncate

Texto longo que será truncado com reticências ao ultrapassar a largura do container

<div style="width:220px">
  <Text truncate>Texto longo que será truncado…</Text>
</div>

API

Props

Prop	Tipo	Padrão	Descrição
variant	display-2xl…code-sm	'body-md'	Token da escala (Fund. 02). família-tamanho.
tag	string	'span'	Elemento HTML renderizado.
tone	'primary' | 'secondary' | 'tertiary' | 'accent' | 'inverted' | 'disabled'	—	Cor de conteúdo. Sem tone, herda do contexto.
truncate	boolean	false	Trunca em 1 linha com reticências.

Slots

Nome	Descrição
default	Conteúdo do texto.

Acessibilidade

• Use tag com o elemento semântico correto (h1–h6, p, label, code…). O variant é só visual.
• Evite heading visual sem heading semântico (ex.: variant="display-md" num span solto).
• Atributos ARIA caem no elemento via v-bind quando preciso.

Migração do MeText

A maior mudança: a taxonomia type + size (title/subtitle/body × xs…xl) foi substituída pela escala canônica do Fundamento 02 (display/heading/body/label/code). Mapeamento aproximado das mais comuns:

Legado	Arrow
title lg/md	display-xl / display-md
title sm/xs	heading-lg / heading-md
subtitle xl/lg	heading-lg / heading-md
body md/sm/xs	body-md / body-sm / body-xs

Outras mudanças:

• color="#hex" → tone (enum de content.*). Sem cor arbitrária.
• fontSize / weight / lineHeight → removidos. A escala é dona dessas medidas.
• Margens (mt/mb/ml/mr/mx/my/margin) → removidas. Espaçamento é do layout que consome.
• italic / underline / uppercase / nowrap / align → removidos. Use elementos nativos (<em>, <u>) ou CSS do container.
• ellipsis → truncate.