Tipografia
Plus Jakarta Sans em uma escala semântica. Cada variant já traz tamanho, entrelinha, tracking e peso — telas não combinam esses valores na mão.
Escala
O rápido salto do lince
variant="display"--text-displayTítulo de destaque, telas de aberturaO rápido salto do lince
variant="page-title"--text-page-titleTítulo de páginaO rápido salto do lince
variant="section-title"--text-section-titleTítulo de seçãoO rápido salto do lince
variant="card-title"--text-card-titleTítulo de card e blocoO rápido salto do lince
variant="body"--text-bodyTexto correnteO rápido salto do lince
variant="body-sm"--text-body-smTexto de apoio, descriçõesO rápido salto do lince
variant="label"--text-labelLabels e itens de navegaçãoO rápido salto do lince
variant="caption"--text-captionMetadados, timestampsTons
O tom é uma prop, não uma classe avulsa.
tone="default" — texto de exemplo
tone="muted" — texto de exemplo
tone="primary" — texto de exemplo
tone="destructive" — texto de exemplo
tone="success" — texto de exemplo
tone="warning" — texto de exemplo
tone="info" — texto de exemplo
O componente escolhe o elemento HTML pela variant (display e page-title viram h1, section-title vira h2, e assim por diante). Use a prop render quando precisar de outro elemento sem perder o estilo.