Sign in
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Ênfase
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Forma
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estado
Carregando exemplo
Formatar código
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 usado por tecnologias assistivas. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam ariaLabel. |
| 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 Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
density
| Atributo | density |
| Descrição | Define a densidade visual do componente. - small: Baixa densidade (componente maior, mais espaçamento e altura).- medium: Densidade intermediária, padrão recomendado para a maioria dos casos.- large: Alta densidade (componente menor, menos espaçamento e altura).> Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam density. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
disabled
| Atributo | disabled |
| Descrição | Desabilita a interação com o componente. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam disabled. |
| 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. |
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
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 |