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

O componente br-sign-in é o controle oficial de autenticação e identificação unificada do GovBR-DS, padronizado para representar o acesso via conta Gov.BR ("Entrar com gov.br").

Para que serve

• Identificação oficial do cidadão: Ponto de entrada padrão para os serviços públicos digitais federais integrados ao provedor de identidade Gov.BR.
• Padronização visual obrigatória: Aplica tipografia, cores institucionais, ícone da marca gov.br e dimensões em estrita conformidade com o Manual de Identidade Visual do Governo Federal.
• Estados de carregamento e desativação: Suporta indicação de espera durante o redirecionamento de login.

Quando utilizar

• Utilize quando:
  • O sistema exigir login e autenticação através da plataforma gov.br.
• Evite e prefira outro componente quando:
  • O botão executar uma ação genérica do sistema que não seja login via gov.br (prefira br-button).
  • O usuário já estiver autenticado e a intenção for apenas exibir o perfil (prefira br-avatar).

Estrutura e Slots

O br-sign-in é um botão de autenticação estilizado com a marca oficial do Governo Federal, recebendo propriedades de rótulo e variantes institucionais.

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

Ênfase primáriaÊnfase secundáriaFormato circular

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

Expandir controles e código

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, para fundos escuros. Quando omitido, ou com valor diferente de dark, usa o esquema claro.
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). Valores inválidos usam medium.
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; em shape="circle", o padrão é um SVG local de usuário.
"image"	Slot para imagem ou ícone ao lado do texto.

Eventos

Evento	Descrição	Depreciação	Propagação
brNavigate	Evento cancelável emitido em navigation-mode="event" para cliques primários sem modificadores em links _self. Chame event.preventDefault() no listener para impedir a navegação nativa e entregar event.detail.href ao roteador da SPA.	---	true

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().

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.

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>