Copiar página como Markdown para IA
Sign In
Visão Geral
O br-sign-in padroniza o botão oficial de autenticação da conta gov.br.
Pode ser exibido no formato padrão (bloco com texto) ou no formato circular compacto com shape="circle". Use a propriedade density para ajustar a densidade visual.
<br-sign-in label="Entrar com gov.br"></br-sign-in>
<br-sign-in shape="circle" aria-label="Entrar com gov.br"></br-sign-in>
Quando usar
- Ponto de acesso ou login único com a conta Gov.br em serviços públicos federais.
Quando evitar
- Ações gerais de formulário (salvar, enviar, cancelar): use
br-button.
Consulte as diretrizes de design do GovBR.
Exemplo(s)
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
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>
