Sign in

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

ariaLabel

Atributo	aria-label
Descrição	Define o rótulo acessível usado por tecnologias assistivas.
Tipo	string
Valor padrão	---

colorMode

Atributo	color-mode
Descrição	Define se o sign-in usará um esquema de cores escuro.
Tipo	"dark"
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()

density

Atributo	density
Descrição	Define a densidade visual do componente. - small: Alta densidade (componente menor, mais compacto e com menos espaçamento). - medium: Densidade intermediária, padrão recomendado para a maioria dos casos. - large: Baixa densidade (componente maior, mais espaçamento e altura).
Tipo	"large" | "medium" | "small"
Valor padrão	'medium'

disabled

Atributo	disabled
Descrição	Desabilita a interação com o componente.
Tipo	boolean
Valor padrão	false

emphasis

Atributo	emphasis
Descrição	Define a ênfase do sign-in, alterando sua aparência para criar hierarquia visual.
Tipo	"primary" | "secondary"
Valor padrão	'secondary'

href

Atributo	href
Descrição	URL para onde o usuário será redirecionado ao clicar. Use para login com provedores externos ou em sites tradicionais.
Tipo	string
Valor padrão	---

navigationMode

Atributo	navigation-mode
Descrição	Controla como o componente integra a navegação mantendo href real no elemento navegável. - native (padrão): preserva o comportamento do navegador, conforme HTML/W3C. - event: emite brNavigate; se o evento for cancelado, bloqueia a navegação nativa para a SPA assumir. Cliques com modificadores, botão do meio ou target diferente de _self permanecem nativos.
Tipo	"event" | "native"
Valor padrão	'native'

shape

Atributo	shape
Descrição	Define o formato do sign-in.
Tipo	"block" | "circle" | "pill"
Valor padrão	'pill'

target

Atributo	target
Descrição	Define onde abrir o link quando href é fornecido.
Tipo	"_blank" | "_parent" | "_self" | "_top"
Valor padrão	'_self'

Slots

Nome	Descrição
"default"	Slot para o texto do sign-in.
"icon"	Slot para ícone personalizado, com padrão fa6-solid:user para shape="circle".
"image"	Slot para imagem ou ícone ao lado do texto.

CSS Shadow Parts

Nome	Descrição
"button"
"content"	Parte para a área de conteúdo/texto do sign-in, usada para estilização via ::part().
"image"	Parte para a área da imagem/ícone, usada para controle de tamanho via CSS e ::part().

Dependências

Depende de

• br-icon

Gráfico

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

O sign-in continua oferecendo uma ação de entrada, mas a aparência usa emphasis e o destino é definido diretamente por href.

Propriedades e composição

API 1.x	API 2.x	Ação na migração
density="middle"	density="medium"	Atualize o valor.
entity, inverted, block	—	Remova; use colorMode, shape e o layout atual.
icon / image	slots de ícone/imagem	Mova os recursos para a composição atual.
isLink	href	Defina href quando a ação for um link.
label	conteúdo padrão	Mova o texto para o elemento.
type	emphasis	Renomeie.

Exemplo

1.x:

<br-sign-in type="primary" label="Entrar" is-link href="/login" density="middle"></br-sign-in>

2.x:

<br-sign-in emphasis="primary" href="/login" density="medium">Entrar</br-sign-in>

Migração de Navegação

Antes, br-sign-in podia usar is-spa-link-behavior quando renderizado como link.

Agora, use navigation-mode="event" quando href apontar para uma rota interna da SPA.

<!-- Antes -->
<br-sign-in href="/login" is-spa-link-behavior>Entrar</br-sign-in>

<!-- Agora -->
<br-sign-in href="/login" navigation-mode="event">Entrar</br-sign-in>

Quando href não é informado, br-sign-in continua sendo renderizado como botão.