Divider

O mk-divider renderiza uma linha fina para separar visualmente blocos de conteúdo. Ele cria fronteiras visuais sutis entre grupos de conteúdo relacionado sem adicionar hierarquia de informação — sua função é puramente visual: reduzir a poluição visual ao separar seções, itens de lista, áreas de formulário ou regiões de layout. Suporta orientação horizontal e vertical, com dois níveis de ênfase.

Quando usar

O divisor é adequado quando a separação precisa ser comunicada visualmente, mas não por meio de texto ou hierarquia.

• Dois grupos de conteúdo precisam ser claramente separados sem hierarquia de título.
• Itens de uma lista precisam de delimitação visual entre si.
• Seções de um formulário ou card precisam de respiração visual.

• A separação puder ser feita com espaçamento — espaço em branco é frequentemente suficiente e menos poluente.
• A distinção precisar de contexto textual — use um título de seção.

Anatomia

O divisor é uma linha única sem conteúdo interno.

Horizontal

Use o divider horizontal para separar seções empilhadas verticalmente — entre cards, grupos de formulário ou áreas de conteúdo distintas.

import { MkDivider } from '@db1/makuco-ui-react';

<p>Seção A</p>
<MkDivider />
<p>Seção B</p>

<p>Seção A</p>
<mk-divider></mk-divider>
<p>Seção B</p>

Vertical

Use o divider vertical para separar itens dispostos lado a lado — em barras de ferramentas, menus inline ou grupos de ações.

<div style={{ display: 'flex', alignItems: 'center', height: '32px' }}>
  <span>Item A</span>
  <MkDivider position="vertical" />
  <span>Item B</span>
</div>

<div style="display: flex; align-items: center; height: 32px;">
  <span>Item A</span>
  <mk-divider position="vertical"></mk-divider>
  <span>Item B</span>
</div>

Ênfase

<MkDivider variant="subtle" />
<MkDivider variant="strong" />

<mk-divider variant="subtle"></mk-divider>
<mk-divider variant="strong"></mk-divider>

Comportamento

O mk-divider é um elemento estático e puramente visual — não possui estados interativos, não emite eventos e não aceita conteúdo via slot. Seu tamanho é determinado pelo container pai: na orientação horizontal ocupa 100% da largura disponível; na orientação vertical ocupa 100% da altura do container pai.

A variante subtle deve ser preferida na maioria dos contextos, pois produz separação discreta sem competir com o conteúdo adjacente. Reserve a variante strong para situações em que a distinção entre áreas funcionalmente diferentes precisa ser perceptível à primeira vista.

Composição

O divisor funciona melhor quando combinado com espaçamento adequado ao redor. Evite utilizá-lo como substituto de margem ou padding — use-o somente quando a linha em si comunica algo que o espaço em branco não consegue.

Em layouts de lista, aplique o divider entre itens apenas quando a densidade visual for alta o suficiente para que os itens se misturem sem a separação. Em listas esparsas, o espaçamento entre itens geralmente é suficiente.

Props

Acessibilidade

• Usa role="separator" e aria-orientation automaticamente, conforme a prop position.

Elemento decorativo: O divisor é um elemento decorativo. Quando não carregar significado semântico — ou seja, quando sua presença for apenas visual e não comunicar uma separação relevante para leitores de tela — deve ter role="none" ou aria-hidden="true" para que tecnologias assistivas o ignorem e não interrompam o fluxo de leitura do conteúdo.