MeText

Componente de texto polimórfico com suporte a tipo tipográfico (title, subtitle, body), tamanho, alinhamento, decorações e margens via props. Renderiza qualquer tag HTML via prop tag.

Playground

Importação

vue

<script>
import { MeText } from '@/components/global/utils/export/index'
</script>

Uso Básico

O MeText renderiza como <span> por padrão com estilo body sm. Use type e size para controlar a hierarquia tipográfica, e tag para escolher o elemento HTML semanticamente correto.

Texto padrão (body sm)

vue

<MeText>Texto padrão (body sm)</MeText>

Tipos Tipográficos

O componente possui três famílias de estilo, cada uma com pesos, tamanhos e line-heights próprios.

Title

Títulos com font-weight: 700. Disponível nos tamanhos xs, sm, md e lg.

Title LG

Title MD

Title SM

Title XS

vue

<MeText type="title" size="lg" tag="h1">Title LG</MeText>
<MeText type="title" size="md" tag="h2">Title MD</MeText>
<MeText type="title" size="sm" tag="h3">Title SM</MeText>
<MeText type="title" size="xs" tag="h4">Title XS</MeText>

Subtitle

Subtítulos com font-weight: 600. Disponível nos tamanhos xs, sm, md, lg e xl.

Subtitle XL

Subtitle LG

Subtitle MD

Subtitle SM

Subtitle XS

vue

<MeText type="subtitle" size="xl" tag="h2">Subtitle XL</MeText>
<MeText type="subtitle" size="lg" tag="h3">Subtitle LG</MeText>
<MeText type="subtitle" size="md" tag="h4">Subtitle MD</MeText>
<MeText type="subtitle" size="sm" tag="h5">Subtitle SM</MeText>
<MeText type="subtitle" size="xs" tag="h6">Subtitle XS</MeText>

Body

Corpo de texto com font-weight: 400. Disponível nos tamanhos xs, sm, md e lg.

Body LG — Texto de parágrafo com tamanho grande para destaque.

Body MD — Texto de parágrafo em tamanho médio para leitura confortável.

Body SM — Texto de parágrafo padrão, mais utilizado na interface.

Body XS — Texto auxiliar pequeno para notas e legendas.

vue

<MeText type="body" size="lg" tag="p">Body LG</MeText>
<MeText type="body" size="md" tag="p">Body MD</MeText>
<MeText type="body" size="sm" tag="p">Body SM</MeText>
<MeText type="body" size="xs" tag="p">Body XS</MeText>

Tag HTML

Use a prop tag para renderizar o elemento HTML semanticamente correto sem alterar o estilo visual.

h1 com estilo title sm

p com estilo body sm

label com estilo subtitle xs

vue

<!-- Estilo visual independente da tag semântica -->
<MeText type="title" size="sm" tag="h1">h1 com estilo title sm</MeText>
<MeText type="body" size="sm" tag="p">p com estilo body sm</MeText>
<MeText type="subtitle" size="xs" tag="label">label com estilo subtitle xs</MeText>

Modificadores

Itálico, Sublinhado e Maiúsculas

Texto em itálicoTexto sublinhadotexto em maiúsculas

vue

<MeText :italic="true">Texto em itálico</MeText>
<MeText :underline="true">Texto sublinhado</MeText>
<MeText :uppercase="true">texto em maiúsculas</MeText>

Ellipsis e Nowrap

Use ellipsis para truncar textos longos e nowrap para impedir quebra de linha.

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

Texto que não vai quebrar em múltiplas linhas mesmo sendo longo

vue

<!-- ellipsis: trunca e exibe "..." -->
<div style="width: 220px;">
  <MeText :ellipsis="true">
    Texto muito longo que será truncado...
  </MeText>
</div>

<!-- nowrap: sem quebra de linha -->
<div style="width: 220px; overflow: hidden;">
  <MeText :nowrap="true">
    Texto que não vai quebrar em múltiplas linhas
  </MeText>
</div>

Estilos Dinâmicos

Cor

AzulVermelhoVerdeMarrom

vue

<MeText color="#1a73e8">Azul</MeText>
<MeText color="#e53935">Vermelho</MeText>
<MeText color="#2e7d32">Verde</MeText>

Alinhamento

Alinhado à esquerda (left)

Centralizado (center)

Alinhado à direita (right)

vue

<MeText align="left" tag="div">Alinhado à esquerda</MeText>
<MeText align="center" tag="div">Centralizado</MeText>
<MeText align="right" tag="div">Alinhado à direita</MeText>

Font Size Customizado

Use fontSize para sobrescrever o tamanho definido por type + size. Números são convertidos para px automaticamente.

32px (número)1.5rem (string)

vue

<!-- Número → convertido para px -->
<MeText :fontSize="32">32px</MeText>

<!-- String → valor CSS direto -->
<MeText fontSize="1.5rem">1.5rem</MeText>

Margens

Todas as props de margem aceitam number (convertido para px) ou string (valor CSS direto).

mt=16 (margem superior 16px)mb=16 (margem inferior 16px)mx=24 (horizontal 24px)my=12 (vertical 12px)

vue

<MeText :mt="16">Margem superior 16px</MeText>
<MeText :mb="16">Margem inferior 16px</MeText>
<MeText :mx="24">Margem horizontal 24px</MeText>
<MeText :my="12">Margem vertical 12px</MeText>

<!-- Valores individuais -->
<MeText :mt="8" :mb="16" :ml="4" :mr="4">Margens individuais</MeText>

<!-- String CSS -->
<MeText mt="1rem" mb="0.5rem">Margens em rem</MeText>

Casos de Uso

Cabeçalho de Página

Gestão de Usuários

Gerencie os usuários do sistema e suas permissões de acesso.

vue

<MeText type="title" size="md" tag="h1">Gestão de Usuários</MeText>
<MeText type="body" size="sm" tag="p" color="#666" :mt="4">
  Gerencie os usuários do sistema e suas permissões de acesso.
</MeText>

Rótulo de Campo

Nome completoInforme o nome como consta no documento

vue

<MeText type="subtitle" size="xs" tag="label">Nome completo</MeText>
<MeText type="body" size="xs" color="#999">
  Informe o nome como consta no documento
</MeText>

Combinações de Modificadores

Seção destacada Texto em itálico para citações ou notas de rodapé

vue

<MeText
  type="subtitle"
  size="sm"
  :uppercase="true"
  color="#1a73e8"
  :underline="true"
>
  Seção destacada
</MeText>

<MeText type="body" size="sm" :italic="true" color="#888">
  Texto em itálico para citações ou notas de rodapé
</MeText>

Tag Dinâmica

Título de nível H3

vue

<script setup>
import { ref } from 'vue'
const nivel = ref(2)
const sizes = { 1: 'lg', 2: 'md', 3: 'sm', 4: 'xs' }
</script>

<template>
  <MeText type="title" :size="sizes[nivel]" :tag="`h${nivel}`">
    Título dinâmico
  </MeText>
</template>

API

Props

Prop	Tipo	Padrão	Descrição
`type`	`'title' \| 'subtitle' \| 'body'`	`'body'`	Família tipográfica. Define peso e line-height base.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'sm'`	Tamanho dentro do tipo. O valor em `px` varia conforme `type` — veja tabela abaixo. `xl` disponível apenas para `subtitle`.
`tag`	`string`	`'span'`	Tag HTML renderizada (ex: `p`, `h1`, `div`, `label`).
`color`	`string`	-	Cor do texto. Aceita qualquer valor CSS válido.
`align`	`string`	-	Alinhamento do texto (`left`, `center`, `right`, `justify`).
`weight`	`string`	-	Peso da fonte. Sobrescreve o peso do tipo.
`fontSize`	`string \| number`	-	Tamanho da fonte. Número → `px`. Sobrescreve `size`.
`lineHeight`	`string \| number`	`'145%'`	Altura de linha. Número → `px`.
`italic`	`boolean`	`false`	Aplica `font-style: italic`.
`underline`	`boolean`	`false`	Aplica `text-decoration: underline`.
`uppercase`	`boolean`	`false`	Aplica `text-transform: uppercase`.
`ellipsis`	`boolean`	`false`	Trunca com reticências (implica `display: block` e `overflow: hidden`).
`nowrap`	`boolean`	`false`	Aplica `white-space: nowrap`.
`margin`	`string \| number`	-	Margem em todos os lados. Número → `px`.
`mt`	`string \| number`	-	`margin-top`. Número → `px`.
`mb`	`string \| number`	-	`margin-bottom`. Número → `px`.
`ml`	`string \| number`	-	`margin-left`. Número → `px`.
`mr`	`string \| number`	-	`margin-right`. Número → `px`.
`mx`	`string \| number`	-	`margin-left` + `margin-right`. Número → `px`.
`my`	`string \| number`	-	`margin-top` + `margin-bottom`. Número → `px`.

Tamanhos por tipo

`size`	`title`	`subtitle`	`body`
`xs`	20px	12px	12px
`sm`	24px	14px	14px
`md`	32px	16px	16px
`lg`	48px	20px	20px
`xl`	—	24px	—

Slots

Nome	Descrição
`default`	Conteúdo do texto. Aceita texto simples ou elementos HTML inline.

Classes CSS Geradas

me-text  text-{type}--{size}  [is-italic]  [is-underline]  [is-uppercase]  [is-ellipsis]  [is-nowrap]

Acessibilidade

Use sempre a prop tag com o elemento HTML semanticamente correto para o contexto (h1–h6 para títulos, p para parágrafos, label para rótulos de campos)
O componente não adiciona atributos ARIA — use atributos nativos via v-bind quando necessário
Evite usar type="title" com tag="span" — isso cria uma hierarquia visual sem estrutura semântica

Aprovado

Salvando alterações...

CSS

vue

<!-- aria-label para textos cujo conteúdo visual não é suficiente -->
<MeText tag="p" aria-label="Status do pedido: aprovado">
  Aprovado
</MeText>

<!-- role + aria-live para regiões de atualização dinâmica -->
<MeText tag="p" role="status" aria-live="polite">
  Salvando alterações...
</MeText>

<!-- Atributo nativo direto para abreviações -->
<MeText tag="abbr" title="Cascading Style Sheets">CSS</MeText>

Boas práticas de hierarquia

Separe o estilo visual da semântica HTML: um <h2> com type="subtitle" size="sm" é perfeitamente válido. Use o nível de heading correto para a estrutura da página, independente do tamanho visual desejado.

Restrições

size="xl" só é válido para type="subtitle" — não existem estilos title--xl nem body--xl
ellipsis já implica nowrap internamente — não é necessário usar ambos juntos
mx sobrescreve ml e mr; my sobrescreve mt e mb quando usados em conjunto
fontSize sobrescreve o tamanho definido pela combinação type + size

MeText ​

Playground ​

Importação ​

Uso Básico ​

Tipos Tipográficos ​

Title ​

Title LG

Title MD

Title SM

Title XS

Subtitle ​

Subtitle XL

Subtitle LG

Subtitle MD

Subtitle SM

Subtitle XS

Body ​

Tag HTML ​

h1 com estilo title sm

Modificadores ​

Itálico, Sublinhado e Maiúsculas ​

Ellipsis e Nowrap ​

Estilos Dinâmicos ​

Cor ​

Alinhamento ​

Font Size Customizado ​

Margens ​

Casos de Uso ​

Cabeçalho de Página ​