Divider

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Visão Geral

O componente br-divider é o elemento separador visual e semântico do GovBR-DS, utilizado para demarcar limites claros entre seções, listas de conteúdos ou áreas temáticas da página.

Para que serve

• Separação visual estruturada: Cria linhas divisórias sutis horizontais ou verticais para organizar blocos de informação com espaçamentos padronizados.
• Rotulação intermediária: Permite incluir texto (ex.: "ou"), ícones ou outros elementos centralizados ao longo da linha divisória através do slot padrão.
• Variações visuais: Suporta estilos contínuos, tracejados (dashed) e diferentes densidades para se adequar ao leiaute.

Quando utilizar

• Utilize quando:
  • Houver necessidade de indicar explicitamente o término de um bloco temático e o início de outro.
  • Separar alternativas com um divisor textual (ex.: "Entrar com conta Gov.BR" --- ou --- "Entrar com certificado digital").
  • Dividir colunas de rodapés, menus laterais ou cabeçalhos.
• Evite e prefira outro componente quando:
  • Os espaçamentos em branco (margens e paddings) já forem suficientes para garantir a percepção de separação sem sobrecarregar visualmente a tela.

Estrutura e Slots

O br-divider é um componente autônomo e de apresentação:

• default: Slot opcional para texto ou elemento centralizado intercalado na linha do divisor.

Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o Design System do GovBR.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

PadrãoVerticalCor personalizadaTracejado

Compartilhar URL

Ativar movimento reduzido

Mudar fundo

Abrir no StackBlitz

Mais opções

Tela cheia

Carregando preview…

HTML

Controles do componente

Console: logs, eventos e erros

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Desfazer alteração

Refazer alteração

Comparar alterações

Formatar código

Resetar código para o estado inicial

Escolher formato para copiar

Propriedades

align

Atributo	align
Descrição	Alinhamento do conteúdo quando há slot interno. Valores inválidos são ignorados.
Tipo	"center" | "end" | "start"
Valor padrão	---

bleed

Atributo	bleed
Descrição	Faz o divisor ocupar toda a largura do container, compensando paddings laterais.
Tipo	boolean
Valor padrão	false

borderStyle

Atributo	border-style
Descrição	Estilo de borda do divisor. Valores inválidos usam solid.
Tipo	"dashed" | "solid"
Valor padrão	'solid'

color

Atributo	color
Descrição	Cor do divisor. Aceita os seguintes formatos de cor: - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc. - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc. - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc. - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc. - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc. - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc. Se não definida, usa a cor padrão do tema.
Tipo	string
Valor padrão	''

colorMode

Atributo	color-mode
Descrição	Esquema de cor canônico. Quando informado, tem precedência sobre isDarkMode; valores inválidos usam light.
Tipo	"dark" | "light"
Valor padrão	---

customId

Atributo	custom-id
Descrição	Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por generateUniqueId().
Tipo	string
Valor padrão	generateUniqueId()

isDarkMode Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	is-dark-mode
Depreciação	Use colorMode.
Descrição	Ativa variante de alto contraste para fundos escuros.
Tipo	boolean
Valor padrão	false

marginBottom

Atributo	margin-bottom
Descrição	Margin bottom em pixels; se omitido, aplica padrão interno. Deve ser um número finito; valores inválidos usam 0.
Tipo	number
Valor padrão	null

marginLeft

Atributo	margin-left
Descrição	Margin left em pixels; se omitido, aplica padrão interno. Deve ser um número finito; valores inválidos usam 0.
Tipo	number
Valor padrão	null

marginRight

Atributo	margin-right
Descrição	Margin right em pixels; se omitido, aplica padrão interno. Deve ser um número finito; valores inválidos usam 0.
Tipo	number
Valor padrão	null

marginTop

Atributo	margin-top
Descrição	Margin top em pixels; se omitido, aplica padrão interno. Deve ser um número finito; valores inválidos usam 0.
Tipo	number
Valor padrão	null

orientation

Atributo	orientation
Descrição	Orientação do divisor. Em modo vertical, posicione dentro de um container com display: flex. Valores inválidos usam horizontal.
Tipo	"horizontal" | "vertical"
Valor padrão	'horizontal'

thickness

Atributo	thickness
Descrição	Espessura visual do divisor. Valores inválidos usam small.
Tipo	"large" | "medium" | "small"
Valor padrão	'small'

Slots

Nome	Descrição
"default"	Slot opcional para conteúdo dentro do divisor (texto, ícones ou elementos personalizados).

CSS Shadow Parts

Nome	Descrição
"content"	Conteúdo do divisor (quando há slot).
"divider"	Elemento principal do divisor.

Dependências

Usado por

• br-datetime-picker
• br-footer
• br-footer-category
• br-header
• br-select-list
• br-tab

Gráfico

Migração de <br-divider> (1.x → 2.x)

O divider mantém o mesmo elemento. As propriedades de apresentação foram renomeadas para descrever diretamente a orientação, a espessura e o estilo da borda.

Propriedades

API 1.x	API 2.x	Ação na migração
dashed	border-style="dashed"	Use o estilo de borda atual.
size	thickness	Renomeie a propriedade.
vertical	orientation="vertical"	Troque o booleano pela orientação explícita.

Exemplo

1.x:

<br-divider vertical size="large" dashed></br-divider>

2.x:

<br-divider orientation="vertical" thickness="large" border-style="dashed"></br-divider>