A entrega foi concluída com sucesso.

Atualizado há 5 minutos.

Rota concluída dentro do prazo.

Falha ao sincronizar com o rastreador.

import { Text } from "@vincisys/eyeson";

export function TextBodyDemo() {
	return (
		<div className="flex flex-col gap-2">
			<Text>A entrega foi concluída com sucesso.</Text>
			<Text variant="secondary">Atualizado há 5 minutos.</Text>
			<Text variant="success">Rota concluída dentro do prazo.</Text>
			<Text variant="error">Falha ao sincronizar com o rastreador.</Text>
		</div>
	);
}

Instalação

import { Text } from '@vincisys/eyeson';

Uso

import { Text } from '@vincisys/eyeson';

export function Example() {
return (
  <>
    <Text variant="heading1" as="h1">Painel da frota</Text>
    <Text>Texto padrão.</Text>
    <Text variant="secondary" size="sm">Texto auxiliar</Text>
  </>
);
}

Variantes de heading (heading1, heading2, heading3) exigem a prop as — você escolhe explicitamente o elemento semântico ("h1", "h2" etc.) ou "span" quando o texto tem estilo de heading mas não é, de fato, um cabeçalho de seção.

Painel da frota

Rotas de hoje

SDU → GRU

Visualizar

import { Text } from "@vincisys/eyeson";

export function TextHeadingsDemo() {
	return (
		<div className="flex flex-col gap-2">
			<Text variant="heading1" as="h1">
				Painel da frota
			</Text>
			<Text variant="heading2" as="h2">
				Rotas de hoje
			</Text>
			<Text variant="heading3" as="h3">
				SDU → GRU
			</Text>
		</div>
	);
}

Texto corrido

A entrega foi concluída com sucesso.

Atualizado há 5 minutos.

Rota concluída dentro do prazo.

Falha ao sincronizar com o rastreador.

Visualizar

import { Text } from "@vincisys/eyeson";

export function TextBodyDemo() {
	return (
		<div className="flex flex-col gap-2">
			<Text>A entrega foi concluída com sucesso.</Text>
			<Text variant="secondary">Atualizado há 5 minutos.</Text>
			<Text variant="success">Rota concluída dentro do prazo.</Text>
			<Text variant="error">Falha ao sincronizar com o rastreador.</Text>
		</div>
	);
}

Tamanhos

size aceita xs, sm, md (padrão) e lg — só se aplica às variantes de texto corrido, não aos headings.

Extra pequeno (xs)

Pequeno (sm)

Padrão (md)

Grande (lg)

Visualizar

import { Text } from "@vincisys/eyeson";

export function TextSizesDemo() {
	return (
		<div className="flex flex-col gap-1">
			<Text size="xs">Extra pequeno (xs)</Text>
			<Text size="sm">Pequeno (sm)</Text>
			<Text size="md">Padrão (md)</Text>
			<Text size="lg">Grande (lg)</Text>
		</div>
	);
}

Monoespaçado

Use mono/mono-secondary para códigos de referência, IDs e placas.

EYS-4821placa ABC-1D23

Visualizar

import { Text } from "@vincisys/eyeson";

export function TextMonoDemo() {
	return (
		<div className="flex flex-col gap-1">
			<Text variant="mono">EYS-4821</Text>
			<Text variant="mono-secondary">placa ABC-1D23</Text>
		</div>
	);
}

Truncar

truncate corta o texto com reticências quando ele não cabe no container.

Entrega para Av. Presidente Juscelino Kubitschek, 1500

Visualizar

import { Text } from "@vincisys/eyeson";

export function TextTruncateDemo() {
	return (
		<div className="w-48">
			<Text truncate bold>
				Entrega para Av. Presidente Juscelino Kubitschek, 1500
			</Text>
		</div>
	);
}