Button
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Densidade
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Ê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
ariaControls
| Atributo | aria-controls |
| Descrição | Referência ao ID do elemento que o botão controla. Use em conjunto com ariaExpanded para relacionar o botão ao painel que ele expande/recolhe. |
| Tipo | string |
| Valor padrão | null |
ariaExpanded
| Atributo | aria-expanded |
| Descrição | Indica se um elemento controlado pelo botão está expandido ou recolhido. Use em botões que abrem menus, acordeões ou outros painéis expansíveis. O valor deve ser 'true' ou 'false'. |
| Tipo | string |
| Valor padrão | null |
ariaHaspopup
| Atributo | aria-haspopup |
| Descrição | Indica que o botão abre um menu, listbox, tree, grid ou dialog. Os valores permitidos são: 'true', 'menu', 'listbox', 'tree', 'grid' ou 'dialog'. |
| Tipo | "dialog" | "grid" | "listbox" | "menu" | "tree" | "true" |
| Valor padrão | null |
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 | null |
ariaPressed
| Atributo | aria-pressed |
| Descrição | Define o estado de pressionado do botão. Este atributo é usado para indicar se o botão está atualmente pressionado ou não. É especialmente útil para botões que podem ser alternados entre os estados pressionado e não pressionado. O valor deve ser 'true' ou 'false'. |
| Tipo | string |
| Valor padrão | null |
colorMode
| Atributo | color-mode |
| Descrição | Define se o botão 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() |
customTabIndex
| Atributo | custom-tab-index |
| Descrição | Define o índice de tabulação do botão. Útil para remover o botão da sequência de tabulação (tabindex="-1") quando ele é puramente decorativo ou o foco é gerenciado por um componente pai. |
| Tipo | number |
| Valor padrão | --- |
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 botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes. |
| Tipo | "primary" | "secondary" | "tertiary" |
| Valor padrão | --- |
isActive
| Atributo | is-active |
| Descrição | Indica se o botão está no estado ativo. Se definido como verdadeiro, o botão será exibido como ativo. |
| Tipo | boolean |
| Valor padrão | false |
isLoading
| Atributo | is-loading |
| Descrição | Aplica o estado de "progresso" ao botão. O botão exibirá um indicador de carregamento ou progresso. |
| Tipo | boolean |
| Valor padrão | false |
shape
| Atributo | shape |
| Descrição | Define o formato do botão. |
| Tipo | "block" | "circle" | "pill" |
| Valor padrão | --- |
type
| Atributo | type |
| Descrição | Define o tipo de botão, especificando seu comportamento padrão. |
| Tipo | "button" | "reset" | "submit" |
| Valor padrão | --- |
value
| Atributo | value |
| Descrição | Define o valor inicial do botão em um formulário. |
| Tipo | string |
| Valor padrão | --- |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para o rótulo ou conteúdo do botão. |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"button" | Parte para o elemento button interno, usada para estilos customizados via ::part(button). |
Dependências
Usado por
- br-breadcrumb
- br-carousel
- br-cookiebar
- br-cookiebar-group
- br-cookiebar-note-group
- br-date-picker
- br-footer-social
- br-header
- br-header-function
- br-header-list
- br-input
- br-loading
- br-menu
- br-menu-header
- br-menu-social
- br-message
- br-modal
- br-notification-header
- br-pagination
- br-tag
- br-time-picker
- br-tooltip
- br-upload
- br-wizard
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|---|---|---|---|
block | shape | Define o formato do botão (parte de shape). | "block" | "circle" | "pill" | --- |
circle | shape | Define o formato do botão (parte de shape). | "block" | "circle" | "pill" | --- |
type | emphasis | Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes. | "primary" | "secondary" | "tertiary" | --- |