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

Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Formatar código

Resetar código para o estado inicial

Copiar para a área de transferência

Propriedades

align

Atributo	align
Descrição	Alinhamento do conteúdo quando há slot interno.
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.
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.
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
Tipo	boolean
Valor padrão	false

marginBottom

Atributo	margin-bottom
Descrição	Margin bottom em pixels; se omitido, aplica padrão interno.
Tipo	number
Valor padrão	null

marginLeft

Atributo	margin-left
Descrição	Margin left em pixels; se omitido, aplica padrão interno.
Tipo	number
Valor padrão	null

marginRight

Atributo	margin-right
Descrição	Margin right em pixels; se omitido, aplica padrão interno.
Tipo	number
Valor padrão	null

marginTop

Atributo	margin-top
Descrição	Margin top em pixels; se omitido, aplica padrão interno.
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.
Tipo	"horizontal" | "vertical"
Valor padrão	'horizontal'

thickness

Atributo	thickness
Descrição	Espessura visual do divisor.
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-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>