Button
Visão Geral
Para uma descrição detalhada, consulte a documentação do GovBR-DS.
Exemplos
Propriedades
ariaLabel
| Atributo | aria-label |
| Descrição | Define o rótulo acessível do botão. utlizado por tecnologias assistivas para descrever o botão. utilizado em conjunto com a propriedade iconOnly garante a acessbilidade do componente no caso de seu conteúdo ser apenas um ícone |
| Tipo | string |
| Valor padrão | null |
buttonLabel
| Atributo | button-label |
| Descrição | Define o elemento textual incluido no botão |
| Tipo | string |
| Valor padrão | '' |
callToAction
| Atributo | call-to-action |
| Descrição | Define se o botão esta no estado call to action |
| Tipo | boolean |
| Valor padrão | false |
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('br-button') |
density
| Atributo | density |
| Descrição | Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido |
| Tipo | "compact" | "regular" | "spacious" |
| Valor padrão | 'regular' |
disabled
| Atributo | disabled |
| Descrição | Define se o botão esta no estado desabilitado |
| Tipo | boolean |
| Valor padrão | false |
emphasis
| Atributo | emphasis |
| Descrição | Define a enfâse da variante visual de enfâse do botão. |
| Tipo | "primary" | "secondary" | "tertiary" |
| Valor padrão | 'primary' |
fullWidth
| Atributo | full-width |
| Descrição | Define se o botão tem o comportamento de bloco |
| Tipo | boolean |
| Valor padrão | false |
iconOnly
| Atributo | icon-only |
| Descrição | Define se o conteúdo do botão será apenas de icone |
| Tipo | boolean |
| Valor padrão | false |
iconPosition
| Atributo | icon-position |
| Descrição | Define o posionamento do icone dentro do botão |
| Tipo | "left" | "right" |
| Valor padrão | --- |
isActive
| Atributo | is-active |
| Descrição | Define se o botão esta no estado ativo |
| Tipo | boolean |
| Valor padrão | false |
type
| Atributo | type |
| Descrição | Define o tipo de botão, especificando seu comportamento padrão. |
| Tipo | "button" | "reset" | "submit" |
| Valor padrão | 'button' |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"container" | Alvo de estilização que encapsula o elemento que atua como container do icone e do texto que compõem o botão. Utilize o seletor ::part(container) para aplicar estilos CSS customizados externamente. |
Slots
| Nome | Descrição |
|---|---|
"button-content" | substitui todo o conteúdo padrão do botão, permitindo inserir estrutura completamente customizada no lugar do ícone e do texto padrões. |
"content-area" | área de slot utilizada para incluir elementos textuais dentro do botão, por default utiliza o componente br-text. |
"icon-area" | área de slot utilizada para incluir ícones dentro do botão. |
Variáveis CSS customizáveis
| Nome | Descrição |
|---|---|
--br-button-active-color-foreground-main | Token de componente button — cor da fonte quando o botão está ativo. |
--br-button-active-color-main | Token de componente button — cor de fundo do botão quando ativo (is-active / :active). |
--br-button-border-style-main-secondary | Token de componente button — estilo de borda usado em variantes com borda (ex.: secondary). |
--br-button-color-background-main-primary | Token de componente button — cor de fundo da variante primary. |
--br-button-color-background-main-secondary | Token de componente button — cor de fundo da variante secondary. |
--br-button-color-background-main-tertiary | Token de componente button — cor de fundo da variante tertiary. |
--br-button-color-foreground-main-primary | Token de componente button — cor da fonte da variante primary. |
--br-button-color-foreground-main-secondary | Token de componente button — cor da fonte da variante secondary. |
--br-button-color-foreground-main-tertiary | Token de componente button — cor da fonte da variante tertiary. |
--br-button-cta-color-foreground-main | Token de componente button — cor da fonte para call-to-action. |
--br-button-cta-color-main | Token de componente button — cor de fundo para call-to-action. |
--br-button-density-compact, --br-button-density-regular, --br-button-density-spacious | Tokens de densidade — valores de padding verticais por densidade do botão. |
--br-button-disabled-color-main | Token de componente button — cor utilizada para estados desativados (disabled) e bordas desativadas. |
--br-button-disabled-opacity | Token de componente button — opacidade aplicada quando o botão está disabled. |
--br-button-focus-border-style-main | Token de componente button — estilo de contorno/outline aplicado quando o botão está em :focus-visible. |
--br-button-gap | Token de componente button — espaçamento entre ícone e texto dentro do surface do botão. |
--br-button-hover-color-interactive-bg-contrast | Token de componente button — cor de fundo aplicada no hover para variantes de contraste. |
--br-button-hover-color-interactive-bg-main | Token de componente button — cor de fundo aplicada no hover (variante primária / interactive background). |
--br-button-hover-color-interactive-fg-main | Token de componente button — cor de primeiro plano (foreground) usada em estados ativos/hover quando aplicável. |
--br-button-padding | Token de componente button — padding horizontal padrão aplicado aos botões. |
--br-button-pressed-shadow-style | Token de componente button — sombra/estilo aplicado ao pressionar o botão. |
--br-button-rounder | Token de componente button — raio de borda padrão dos botões. |
Dependências
Depende de
Gráfico
Migração: Vue 2.x → Stencil 3.x
Propriedades
🟦 Propriedades renomeadas
| Nome Antigo | Novo Nome | Descrição | Tipo | Padrão |
|---|---|---|---|---|
| emphasis | variant | Define a variante visual de ênfase do botão | "primary" | "secondary" | "tertiary" | "primary" |
🟥 Propriedades removidas
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| ariaPressed | Define o estado de pressionado do botão | string | --- |
| colorMode | Define se o botão usará um esquema de cores escuro | "dark" | --- |
| customTabIndex | Define o índice de tabulação do botão | number | --- |
| isLoading | Aplica o estado de carregamento ao botão | boolean | --- |
| shape | Define o formato do botão (block, circle, pill) | "block" | "circle" | "pill" | --- |
| value | Define o valor inicial do botão em um formulário | string | --- |
🟩 Novas propriedades
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
| callToAction | Define se o botão está no estado call to action | boolean | false |
| density | Ajusta a densidade do espaçamento interno | "compact" | "regular" | "spacious" | "regular" |
| fullWidth | Define se o botão tem comportamento de bloco | boolean | false |
| iconOnly | Define se o conteúdo do botão será apenas de ícone | boolean | false |
| iconPosition | Define o posicionamento do ícone dentro do botão | "right" | "left" | --- |
| title | Define o elemento textual incluído no botão | string | "" |
Eventos
🟦 Eventos renomeados
| Evento Vue | Evento Stencil | Descrição |
|---|---|---|
| click | btnClick | Emite evento de clique do botão |
Slots
🟦 Slots renomeados
| Slot Vue | Slot Stencil | Descrição |
|---|---|---|
| default | text-area | Slot para o rótulo ou conteúdo de texto do botão |
🟩 Slots criados
| Slot | Descrição |
|---|---|
| icon-area | Área de slot utilizada para incluir ícones dentro do botão |