T2 EducaçãoMidas

Separator

Linha divisória horizontal ou vertical. Decorativa por padrão; com decorative={false} é anunciada como separador.

Código-fonte

Exemplos

Interaja com o componente e copie o código de cada exemplo.

Horizontal e vertical

Midas

Design system da T2

Blog
Docs
Cursos
import { Separator } from "@t2-educacao/midas";

Uso

<div>
  <p>Perfil</p>
  <Separator className="my-4" />
  <p>Segurança</p>
</div>

Props

PropTipoPadrãoDescrição
orientation"horizontal" | "vertical""horizontal"Direção da linha
decorativebooleantruefalse faz leitores de tela anunciarem a divisão

Exemplos

Vertical

<div className="flex h-5 items-center gap-4 text-sm">
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
</div>

Não faça

  • Usar Separator para criar espaço: use margem ou gap.

On this page