Sign in
Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Ênfase
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Forma
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estado
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
ariaLabel
| Atributo | aria-label |
| Descrição | Define o rótulo acessível do sign-in, especialmente importante para formatos circulares. |
| 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. Caso não seja fornecido, um ID gerado automaticamente será usado. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
density
| Atributo | density |
| Descrição | Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
disabled
| Atributo | disabled |
| Descrição | Desativa o sign-in, tornando-o não interativo. |
| 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 | --- |
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. |
Dependências
Depende de
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|---|---|---|---|
density="middle" | density="medium" | Densidade média renomeada | 'large' | 'medium' | 'small' | 'medium' |
icon | slot icon | Ícone agora via slot com mais flexibilidade | string | - |
image | slot image | Imagem/logo agora via slot | object/string | - |
isLink | href | Link definido pela presença do href | boolean → string | false → undefined |
label | slot default | Texto principal agora via slot | string | - |
type | emphasis | Define a ênfase visual do componente | 'primary' | 'secondary' | 'secondary' |
🟥 Propriedades removidas
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
entity | Nome institucional removido em favor do slot | string | - |
inverted | Substituído por colorMode="dark" | boolean | false |